¿Qué vamos a construir?
Un reloj digital que muestre la hora, minutos y segundos actuales. Aquí puedes ver la versión final. ?
Pre-requisitos
Para poder entender bien este tutorial, necesitarás nociones básicas de JavaScript (JS). Pero no te preocupes, porque tienes todo lo que necesitas saber en esta sección de JavaScript basics. ?
Vamos a utilizar date objects y timestamps, así que te conviene saber de qué estamos hablando...Y por supuesto, aquí tienes una guía completa sobre el asunto. ?
Dicho esto, ¡comenzamos!
Estado inicial de nuestra app
Para construir este reloj vamos a necesitar un archivo HTML, un archivo CSS y un archivo JS. Los llamaremos index.html, styles.css y clock.js respectivamente.
Creamos un boilerplate en nuestro archivo HTML y lo vinculamos a los archivos CSS y JS. El <body> únicamente va a contener un <div> donde inyectaremos nuestro reloj posteriormente. ? Aquí el index.html:
Construcción del reloj
1. En nuestro archivo JS, obtenemos una referencia al <div> con la clase clock, porque será ahí donde inyectaremos nuestro reloj.
const clock = document.querySelector('.clock');
2. Creamos una función que será la responsable de actualizar la hora en nuestro reloj a cada segundo. Es decir, para crear el reloj, obtendremos la hora actual y haremos que esta función la muestre cada segundo, consiguiendo así el efecto de un verdadero reloj.
La llamaremos tick. ⌚
Dentro de la función, creamos una variable y le asignamos el valor de un date object con la fecha actual. Es decir, únicamente invocamos al constructor new Date().
3. Para poder llamar a la función cada segundo, utilizamos el método setInterval y le pasamos como primer parámetro, la función, y como segundo parámetro, 1000 milisegundos, porque queremos que se repita cada 1 segundo.
4. Vamos a obtener las horas, minutos y segundos actuales, dentro de la función tick. Las guardamos cada una en una variable. Hacemos un console.log para comprobar que vamos por buen camino.
const tick = () => {
const now = new Date();
const h = now.getHours();
const m = now.getMinutes();
const s = now.getSeconds();
console.log(h, m, s);
};
setInterval(tick, 1000);
Si vas a tu consola, verás que se imprime la hora que es, y que lo hace cada 1 segundo. ?
Viendo que nuestro código funciona, ya podemos deshacernos del console.log.
// console.log(h, m, s);
5. Porque lo que de verdad queremos hacer es mostrar el reloj en nuestra web. Para ello, debemos manipular el DOM, así que creamos una html template que posteriormente inyectaremos en el DOM. Esa html template será una template string con un <span> por cada bloque del reloj (horas, minutos y segundos).
Guardamos la template string en una variable.
6. Inyectamos la template string en el DOM a través de la referencia al clock, usando la propiedad innerHTML.
const html = `
<span>${h}</span> :
<span>${m}</span> :
<span>${s}</span>
`;
clock.innerHTML = html;
¡¡Ya funciona!! ¡Podemos ver nuestro reloj en la web! ✌ ?♀️
Mejorando el diseño de nuestro reloj
La funcionalidad de nuestro reloj ya está terminada, sólo nos queda pulir un poco el estilo para que se vea más decente. Así que le aplicamos unos estilos en el styles.css:
body {
background: #2f2fa1;
font-size: 5em;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.clock {
color: #f64c71;
margin: 100px auto;
text-align: center;
}
.clock span {
text-shadow: 2px 2px 8px #191955;
}
Y ahora si que sí, ¡todo listo! ? ?? ?
THE END!
¡Y con esto terminamos nuestro proyecto! Espero que hayas aprendido algo nuevo ?. Si te queda alguna duda, ¡nos vemos en los comentarios!
Y si crees que este post puede serle útil a alguien, ¡compártelo!
Otros artículos que pueden interesarte