Cómo hacer un temporizador tipo "pomodoro" con JavaScript

El método Pomodoro es una técnica de gestión del tiempo popularizada por Francesco Cirillo en la década de 1980. Esta técnica utiliza un temporizador para dividir el trabajo en intervalos de 25 minutos, separados por breves pausas. En este artículo, te enseñaremos a crear un temporizador tipo "Pomodoro" utilizando JavaScript. Este proyecto no solo te ayudará a mejorar tu habilidad en programación, sino que también puedes usarlo para gestionar mejor tu tiempo.

¿Qué es el método Pomodoro?

El método Pomodoro se basa en períodos de trabajo concentrado de 25 minutos seguidos de un descanso de 5 minutos. Después de completar cuatro "Pomodoros", se recomienda tomar un descanso más largo de 15 a 30 minutos. Esta técnica ha demostrado ser efectiva para aumentar la productividad y concentrarse mejor en tareas específicas.

Requisitos previos

Para seguir este tutorial, debes tener un conocimiento básico de:

HTML: Estructuras de documentos web.
CSS: Para el diseño y la presentación.
JavaScript: Lógica y funcionalidad del temporizador.

Estructura HTML

Primero, crea un archivo index.html y asegúrate de incluir la estructura básica de HTML. Aquí te mostramos un ejemplo simple:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Temporizador Pomodoro</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Temporizador Pomodoro</h1>
        <div id="timer">25:00</div>
        <button id="startButton">Iniciar</button>
        <button id="stopButton">Detener</button>
        <button id="resetButton">Reiniciar</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

Estilos CSS

A continuación, crea un archivo styles.css para aplicar algunos estilos básicos al temporizador. Aquí tienes un ejemplo:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.container {
    text-align: center;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

#timer {
    font-size: 48px;
    margin: 20px 0;
}

Lógica JavaScript

Ahora, añadamos la funcionalidad del temporizador en un archivo script.js. Este es el componente clave donde manejarás la lógica del temporizador:

let timer; // Para almacenar la referencia al temporizador
let isRunning = false; // Estado del temporizador
let timeLeft = 25 * 60; // 25 minutos en segundos

function updateTimerDisplay() {
    const minutes = Math.floor(timeLeft / 60);
    const seconds = timeLeft % 60;
    document.getElementById('timer').textContent = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
}

function startTimer() {
    if(!isRunning) {
        isRunning = true;
        timer = setInterval(() => {
            if (timeLeft > 0) {
                timeLeft--;
                updateTimerDisplay();
            } else {
                clearInterval(timer);
                alert("¡Tiempo terminado!");
                timeLeft = 25 * 60; // Reiniciar a 25 minutos
                updateTimerDisplay();
                isRunning = false;
            }
        }, 1000);
    }
}

function stopTimer() {
    clearInterval(timer);
    isRunning = false;
}

function resetTimer() {
    clearInterval(timer);
    timeLeft = 25 * 60;
    updateTimerDisplay();
    isRunning = false;
}

// Asignar eventos a los botones
document.getElementById('startButton').onclick = startTimer;
document.getElementById('stopButton').onclick = stopTimer;
document.getElementById('resetButton').onclick = resetTimer;

// Inicializar el temporizador en la pantalla
updateTimerDisplay();

Mejoras y características adicionales

Una vez que hayas implementado el temporizador básico Pomodoro, considera agregar algunas características adicionales:

Sonido de alarma: Puedes implementar un sonido que se reproduzca al finalizar el tiempo.
Configuración personalizada: Permitir al usuario cambiar la duración de los intervalos y descansos.
Registro: Guardar un registro de los intervalos completados y los descansos tomados.

Conclusión

Crear un temporizador tipo "Pomodoro" con JavaScript es un excelente proyecto para practicar tus habilidades de front-end. Con los pasos que te hemos proporcionado en este artículo, ya tienes la base de un temporizador eficiente. No dudes en experimentar y añadir tus propias funcionalidades para personalizarlo aún más. ¡Buena suerte y disfruta programando!

Este artículo ha sido optimizado para SEO utilizando palabras clave relacionadas con el temporizador Pomodoro y JavaScript. Si lo compartes o lo publicas, asegúrate de usar etiquetas meta adecuadas y enlaces internos que mejoren la visibilidad en los motores de búsqueda.