Ilustracion de varios elementos gráficos relacionados con la programación, incluyendo iconos de HTML, CSS y JavaScript

Como crear un temporizador (timer) simple con JavaScript

En este artículo, se explica cómo crear un temporizador simple utilizando JavaScript. Este proyecto es una introducción práctica a la manipulación del DOM y el manejo de intervalos de tiempo en JavaScript.

Para comenzar, es necesario tener un entorno básico de desarrollo web. Esto incluye un archivo HTML para la estructura de la página, un archivo CSS para los estilos y un archivo JavaScript para la lógica del temporizador.

1. Estructura HTML

Creamos un archivo HTML básico que contendrá el temporizador y los botones.

Captura del código en HTML

Primero, en la parte superior del archivo, colocamos la declaración <!DOCTYPE html> para indicar que estamos usando HTML5. Luego, definimos el elemento <html> con el atributo lang="es", lo que ayuda a los navegadores y motores de búsqueda a entender que el contenido está en español.
Dentro del <head>, agregamos algunos metadatos importantes. Primero, el <meta charset="UTF-8"> para que la página pueda mostrar correctamente caracteres especiales. Luego, el <meta name="viewport" content="width=device-width, initial-scale=1.0"> hace que la página se adapte mejor a distintos dispositivos. También añadimos un <title> para establecer el nombre que aparecerá en la pestaña del navegador. Finalmente, enlazamos un archivo CSS externo (styles.css) donde definiremos los estilos del temporizador.
Después viene el <body>, donde estructuramos el contenido de la página. Primero, dentro del <header>, colocamos un <h1> con el texto "Temporizador", que servirá como título principal.
Luego, pasamos al <main>, que funciona como el contenedor principal de la aplicación. Dentro de este, creamos un <div> con la clase container para agrupar todos los elementos relacionados con el temporizador.
Dentro de container, agregamos otro <div> con la clase timer-container, que contendrá el temporizador en sí. Aquí, colocamos un <div> con el id timer, donde se mostrarán los minutos y segundos. Inicialmente, tiene el valor "00:00".
Debajo del temporizador, creamos un contenedor adicional con la clase buttons, donde colocamos tres botones. Cada uno tiene un id específico: start para iniciar el temporizador, stop para detenerlo y reset para reiniciarlo.
Finalmente, antes de cerrar el body, enlazamos el archivo script.js con la etiqueta <script>. Este archivo contendrá la lógica.

2. Lógica en JavaScript

Creamos el archivo script.js, donde estableceremos la lógica del temporizador.

Captura de código de la lógica del temporizador

Primero, declaramos una variable timerInterval, que nos servirá para almacenar el identificador del intervalo del temporizador cuando esté en marcha. Luego, definimos otra variable llamada time, que comienza en 0 y representará el tiempo en segundos.
Después, obtenemos del DOM los elementos necesarios utilizando document.getElementById(). Guardamos en timerDisplay el elemento donde se mostrará el tiempo, y en startButton, stopButton y resetButton, los botones que permitirán controlar el temporizador.
Ahora definimos la función updateTimer(), que se encargará de actualizar la visualización del tiempo. Dentro de ella, calculamos los minutos dividiendo time entre 60 y redondeando hacia abajo con Math.floor(). Los segundos se obtienen con el residuo de la división (time % 60). Luego, usamos String().padStart(2, '0') para asegurarnos de que tanto los minutos como los segundos siempre tengan dos dígitos, añadiendo un 0 al inicio si es necesario. Finalmente, actualizamos el contenido del timerDisplay con este formato y aumentamos time en 1.
Para manejar el inicio del temporizador, agregamos un eventListener al botón de inicio (startButton). Dentro de la función de evento, verificamos si timerInterval no tiene un valor asignado. Si está vacío, significa que el temporizador no está corriendo, así que usamos setInterval(updateTimer, 1000) para ejecutar updateTimer() cada segundo y guardamos el identificador del intervalo en timerInterval.
El botón de detener (stopButton) también tiene un eventListener. Aquí, simplemente llamamos a clearInterval(timerInterval), lo que detiene la ejecución repetida de updateTimer(). Luego, establecemos timerInterval en null para indicar que el temporizador está pausado.
Para el botón de reinicio (resetButton), seguimos un proceso similar. Primero, detenemos cualquier intervalo en ejecución con clearInterval(timerInterval), asignamos null a timerInterval y reiniciamos time a 0. Luego, llamamos a updateTimer() inmediatamente para que la pantalla muestre "00:00" en lugar del último valor antes del reinicio.
Por último, llamamos a updateTimer() una vez al inicio del script, asegurándonos de que el temporizador muestre "00:00" desde el principio antes de que el usuario presione algún botón.

3. Estilo CSS

Creamos un archivo styless.css, donde colocaremos los estilos a preferencia de cada uno, en este caso le colocamos una paleta de colores pastel con un fondo de video.
Captura del temporizador web

Este ejemplo muestra cómo crear un temporizador simple con JavaScript, utilizando manipulación del DOM y gestión de intervalos de tiempo. A través de la estructura HTML y la lógica en JavaScript. Este puede servir como base para proyectos más avanzados, como cronómetros con funciones adicionales o temporizadores con alarmas. Además, es una buena práctica para comprender el uso de eventos, intervalos y la actualización dinámica del contenido en una página web.