PortalTec

Proyectos · JavaScript · Intermedio

Temporizador Pomodoro

Un temporizador de 25 minutos de concentración y 5 de descanso que no se desajusta, cambia de modo solo, cuenta tus pomodoros y avisa con un sonido generado en el navegador.

  • 5 pasos
  • 1 hora aproximadamente
  • 158 líneas de código
  • Editor en vivo

La técnica Pomodoro alterna 25 minutos de trabajo concentrado con 5 de descanso. Programar su temporizador enseña algo que sorprende: setInterval no es un reloj exacto. Vas a hacer una cuenta atrás que no se desajusta, con pausa, cambio automático de modo y un aviso sonoro creado con la Web Audio API, sin ningún archivo de audio.

Lo que vas a practicar

  • Temporizadores con setInterval
  • Calcular el tiempo con Date.now()
  • Un mismo botón con dos funciones
  • Estado con varios modos
  • Generar sonido con Web Audio
Resultado final

Antes de empezar, conviene haber hecho estas lecciones

Paso 1 de 5

La interfaz

Un rectángulo con el modo actual, el tiempo en grande y dos botones. font-variant-numeric: tabular-nums hace que todas las cifras ocupen lo mismo y el número no «baile» al cambiar.

El atributo data-modo del contenedor permitirá cambiar el color de fondo desde CSS según el modo.

index.html
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pomodoro</title>
  <link rel="stylesheet" href="estilos.css">
</head>
<body>
  <main class="pomodoro" data-modo="trabajo">
    <p class="modo" id="modo">Concentración</p>
    <p class="tiempo" id="tiempo" role="timer" aria-live="off">25:00</p>
    <div class="botones">
      <button type="button" id="empezar">Empezar</button>
      <button type="button" id="reiniciar" class="secundario">Reiniciar</button>
    </div>
    <p class="contador" id="contador" aria-live="polite">Pomodoros completados: 0</p>
  </main>
  <script src="app.js"></script>
</body>
</html>
estilos.css
* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: system-ui, sans-serif;
  background: #0f172a;
  color: #f8fafc;
}

.pomodoro {
  width: min(92vw, 360px);
  padding: 32px 24px;
  border-radius: 24px;
  text-align: center;
  background: #b91c1c;
  transition: background-color 400ms ease;
}

.pomodoro[data-modo="descanso"] { background: #047857; }

.modo { margin: 0; font-size: 1.1rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }

.tiempo {
  margin: 12px 0 24px;
  font-size: clamp(3.5rem, 18vw, 5.5rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.botones { display: flex; justify-content: center; gap: 12px; }

button {
  min-width: 120px;
  padding: 12px 18px;
  border: 0;
  border-radius: 12px;
  background: #ffffff;
  color: #0f172a;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
button.secundario { background: rgb(255 255 255 / 0.2); color: #ffffff; }
button:focus-visible { outline: 3px solid #fde047; outline-offset: 3px; }

.contador { margin: 24px 0 0; opacity: 0.85; }
app.js
// El JavaScript llega en el paso 2

Paso 2 de 5

La cuenta atrás

formatear convierte segundos en «mm:ss» con padStart para que el 5 se vea como «05». setInterval ejecuta una función cada 250 milisegundos.

El truco está en no restar 1 en cada vuelta: setInterval puede retrasarse (sobre todo con la pestaña en segundo plano) y el reloj se iría desajustando. En su lugar se calcula la hora de fin y, en cada vuelta, cuánto falta hasta ella.

app.js
const tiempo = document.querySelector("#tiempo");
const botonEmpezar = document.querySelector("#empezar");

const DURACION = 25 * 60; // segundos
let restantes = DURACION;
let intervalo = null;

function formatear(segundos) {
  const minutos = Math.floor(segundos / 60);
  const resto = segundos % 60;
  return `${String(minutos).padStart(2, "0")}:${String(resto).padStart(2, "0")}`;
}

function mostrar() {
  tiempo.textContent = formatear(restantes);
}

function empezar() {
  // Se calcula a partir de la hora de fin: setInterval no es exacto y acumularía retraso
  const fin = Date.now() + restantes * 1000;
  intervalo = setInterval(() => {
    restantes = Math.max(0, Math.round((fin - Date.now()) / 1000));
    mostrar();
    if (restantes === 0) clearInterval(intervalo);
  }, 250);
}

botonEmpezar.addEventListener("click", empezar);
mostrar();

Paso 3 de 5

Pausar y reiniciar

Pausar es detener el intervalo con clearInterval; como restantes conserva lo que quedaba, al seguir se calcula una nueva hora de fin desde ahí.

Un mismo botón empieza o pausa: si hay un intervalo en marcha (intervalo no es null), pausa; si no, empieza. Su texto cambia para que siempre diga lo que va a hacer.

app.jsLo nuevo, resaltado
const tiempo = document.querySelector("#tiempo");
const botonEmpezar = document.querySelector("#empezar");
const botonReiniciar = document.querySelector("#reiniciar");

const DURACION = 25 * 60; // segundos
let restantes = DURACION;
let intervalo = null;

function formatear(segundos) {
  const minutos = Math.floor(segundos / 60);
  const resto = segundos % 60;
  return `${String(minutos).padStart(2, "0")}:${String(resto).padStart(2, "0")}`;
}

function mostrar() {
  tiempo.textContent = formatear(restantes);
}

function empezar() {
  const fin = Date.now() + restantes * 1000;
  intervalo = setInterval(() => {
    restantes = Math.max(0, Math.round((fin - Date.now()) / 1000));
    mostrar();
    if (restantes === 0) pausar();
  }, 250);
  botonEmpezar.textContent = "Pausar";
}

function pausar() {
  clearInterval(intervalo);
  intervalo = null;
  botonEmpezar.textContent = "Seguir";
}

function reiniciar() {
  pausar();
  restantes = DURACION;
  botonEmpezar.textContent = "Empezar";
  mostrar();
}

// El mismo botón empieza o pausa según si el temporizador está en marcha
botonEmpezar.addEventListener("click", () => (intervalo ? pausar() : empezar()));
botonReiniciar.addEventListener("click", reiniciar);
mostrar();

Paso 4 de 5

Trabajo y descanso

Los dos modos se guardan en un objeto con su nombre y su duración. Al llegar a cero, terminar cuenta el pomodoro (si era de trabajo), cambia al otro modo y deja el temporizador listo.

pomodoro.dataset.modo = modo cambia el atributo data-modo, y el CSS pinta el fondo de rojo o de verde con una transición suave.

app.jsLo nuevo, resaltado
const tiempo = document.querySelector("#tiempo");
const botonEmpezar = document.querySelector("#empezar");
const botonReiniciar = document.querySelector("#reiniciar");
const pomodoro = document.querySelector(".pomodoro");
const textoModo = document.querySelector("#modo");
const contador = document.querySelector("#contador");

const MODOS = {
  trabajo: { nombre: "Concentración", segundos: 25 * 60 },
  descanso: { nombre: "Descanso", segundos: 5 * 60 },
};

let modo = "trabajo";
let restantes = MODOS[modo].segundos;
let intervalo = null;
let completados = 0;

function formatear(segundos) {
  const minutos = Math.floor(segundos / 60);
  const resto = segundos % 60;
  return `${String(minutos).padStart(2, "0")}:${String(resto).padStart(2, "0")}`;
}

function mostrar() {
  tiempo.textContent = formatear(restantes);
  textoModo.textContent = MODOS[modo].nombre;
  pomodoro.dataset.modo = modo;
}

function empezar() {
  const fin = Date.now() + restantes * 1000;
  intervalo = setInterval(() => {
    restantes = Math.max(0, Math.round((fin - Date.now()) / 1000));
    mostrar();
    if (restantes === 0) terminar();
  }, 250);
  botonEmpezar.textContent = "Pausar";
}

function pausar() {
  clearInterval(intervalo);
  intervalo = null;
  botonEmpezar.textContent = "Seguir";
}

function terminar() {
  pausar();
  if (modo === "trabajo") {
    completados += 1;
    contador.textContent = `Pomodoros completados: ${completados}`;
  }
  // Cambia de modo y deja el temporizador listo para empezar
  modo = modo === "trabajo" ? "descanso" : "trabajo";
  restantes = MODOS[modo].segundos;
  botonEmpezar.textContent = "Empezar";
  mostrar();
}

function reiniciar() {
  pausar();
  restantes = MODOS[modo].segundos;
  botonEmpezar.textContent = "Empezar";
  mostrar();
}

botonEmpezar.addEventListener("click", () => (intervalo ? pausar() : empezar()));
botonReiniciar.addEventListener("click", reiniciar);
mostrar();

Paso 5 de 5

Aviso sonoro y título de la pestaña

La Web Audio API genera sonido en el navegador: un oscilador produce un tono (880 Hz) y un nodo de volumen lo apaga poco a poco. Tres pitidos seguidos avisan del final, sin descargar ningún archivo.

Los navegadores solo permiten sonido después de que la persona interactúe con la página, por eso el AudioContext se crea al pulsar «Empezar» (??= lo crea solo la primera vez). El tiempo también se ve en el título de la pestaña.

app.jsLo nuevo, resaltado
const tiempo = document.querySelector("#tiempo");
const botonEmpezar = document.querySelector("#empezar");
const botonReiniciar = document.querySelector("#reiniciar");
const pomodoro = document.querySelector(".pomodoro");
const textoModo = document.querySelector("#modo");
const contador = document.querySelector("#contador");

const MODOS = {
  trabajo: { nombre: "Concentración", segundos: 25 * 60 },
  descanso: { nombre: "Descanso", segundos: 5 * 60 },
};

let modo = "trabajo";
let restantes = MODOS[modo].segundos;
let intervalo = null;
let completados = 0;
let audio = null; // el contexto de sonido se crea con el primer clic (los navegadores lo exigen)

function pitar() {
  if (!audio) return;
  // Tres pitidos cortos con un oscilador: no hace falta ningún archivo de sonido
  for (let i = 0; i < 3; i++) {
    const inicio = audio.currentTime + i * 0.35;
    const oscilador = audio.createOscillator();
    const volumen = audio.createGain();
    oscilador.frequency.value = 880;
    volumen.gain.setValueAtTime(0.25, inicio);
    volumen.gain.exponentialRampToValueAtTime(0.001, inicio + 0.25);
    oscilador.connect(volumen).connect(audio.destination);
    oscilador.start(inicio);
    oscilador.stop(inicio + 0.25);
  }
}

function formatear(segundos) {
  const minutos = Math.floor(segundos / 60);
  const resto = segundos % 60;
  return `${String(minutos).padStart(2, "0")}:${String(resto).padStart(2, "0")}`;
}

function mostrar() {
  tiempo.textContent = formatear(restantes);
  document.title = `${formatear(restantes)} · ${MODOS[modo].nombre}`; // se ve en la pestaña
  textoModo.textContent = MODOS[modo].nombre;
  pomodoro.dataset.modo = modo;
}

function empezar() {
  audio ??= new AudioContext();
  const fin = Date.now() + restantes * 1000;
  intervalo = setInterval(() => {
    restantes = Math.max(0, Math.round((fin - Date.now()) / 1000));
    mostrar();
    if (restantes === 0) terminar();
  }, 250);
  botonEmpezar.textContent = "Pausar";
}

function pausar() {
  clearInterval(intervalo);
  intervalo = null;
  botonEmpezar.textContent = "Seguir";
}

function terminar() {
  pausar();
  pitar();
  if (modo === "trabajo") {
    completados += 1;
    contador.textContent = `Pomodoros completados: ${completados}`;
  }
  // Cambia de modo y deja el temporizador listo para empezar
  modo = modo === "trabajo" ? "descanso" : "trabajo";
  restantes = MODOS[modo].segundos;
  botonEmpezar.textContent = "Empezar";
  mostrar();
}

function reiniciar() {
  pausar();
  restantes = MODOS[modo].segundos;
  botonEmpezar.textContent = "Empezar";
  mostrar();
}

botonEmpezar.addEventListener("click", () => (intervalo ? pausar() : empezar()));
botonReiniciar.addEventListener("click", reiniciar);
mostrar();

Retos para seguir

Has terminado el proyecto. Si quieres ir más allá, prueba a añadirle esto por tu cuenta:

  1. Tras 4 pomodoros, haz un descanso largo de 15 minutos.
  2. Permite cambiar las duraciones con dos campos numéricos.
  3. Muestra un aviso del sistema al terminar con la Notification API (pide permiso primero).

Conceptos clave

Repasa la ruta de JavaScript o elige otro proyecto.