Recientemente empecé a interiorizarme un poco con el mundo del front-end. Les comparto mi primer proyecto: un temporizador completamente funcional creado desde cero.
Al mismo tiempo hice un temporizador en Gambas3 que compartiré en algún momento, pues aún no está terminado. No sé que tengo con los temporizadores...
¿Qué hace el proyecto?
Es simple, pero efectivo. Podemos:
- Establecer un tiempo: Puedes definir horas, minutos y segundos.
- Iniciar la cuenta regresiva: Con solo un clic, el tiempo empieza a correr.
- Ver el tiempo restante: Una pantalla digital muestra la cuenta regresiva.
- Sonar una alarma: Cuando el tiempo llega a
00:00:00, una alarma suena para avisarte. - Detener la alarma: Un botón aparece para que puedas silenciar el sonido una vez que has escuchado el aviso.
No usé frameworks ni librerías complicadas, solo los tres pilares de la web:
HTML: Fue mi punto de partida. Lo usé para dar estructura a la página: un título, los campos para introducir el tiempo (
<input type="number">), los botones (<button>) y, por supuesto, el<h2>donde se muestra el tiempo. También incluí una etiqueta<audio>que, aunque invisible, es la responsable de reproducir el sonido de la alarma.CSS: Usé un fondo oscuro y semitransparente para el contenedor principal para que resaltara sobre una imagen de fondo. Con
flexbox, centré todo perfectamente en la pantalla.JavaScript (Vanilla): El cerebro de toda la operación y la parte que más me interesa realmente. El diseño no es lo mío por lo que probablemente en futuros proyectos use bootstrap o algunos templates que encuentre en la web.
- Manipulación del DOM: Usé
document.getElementById()para "conectar" mi código JavaScript con los elementos de mi HTML (botones, inputs, etc.). - Eventos: Con
addEventListener("click", ...), puse a los botones a "escuchar" los clics del usuario para que supieran cuándo ejecutar una función. setInterval: Esta fue la clave de todo.setInterval(funcion, 1000)es una función de JavaScript que me permitió ejecutar el código para actualizar el temporizador cada segundo (1000 milisegundos).- Lógica de tiempo: Tuve que desempolvar las matemáticas para convertir el total de segundos a un formato de
horas:minutos:segundos. El operador módulo (%) -> esencial. - Funciones Flecha: Adopté la sintaxis moderna de JavaScript usando funciones flecha
() => {}.
- Manipulación del DOM: Usé
Crear este proyecto desde cero fue una buena experiencia para arrancar. Me enfrenté a pequeños desafíos, como asegurarme de que el formato del tiempo siempre tuviera dos dígitos (ej. 09 en vez de 9) o detener correctamente el intervalo del temporizador.
Si estás aprendiendo, te animo a que intentes construir algo similar. No tienes que hacerlo perfecto, solo tienes que empezar.
Como siempre, les dejo el link al repo de GitHub: https://github.com/mcattani/jsTimer.git
Cada pequeña ayuda o gesto de apoyo significa un montón para mí. Si quieres ayudar:
.
Saludos!
