portada construye reloj digital con vanilla JS

Construye un reloj digital con vanilla JavaScript

Última actualización:

¿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 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 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:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Reloj digital con JS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="clock"></div>
    <script src="clock.js"></script>
</body>
</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. 👌

reloj digital en consola

​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

Días del 353 al 386
Objetivos versus realidad Y nuevamente, llegó otro día clave. Llegó…y pasó. El pasado 4 de marzo este Reto Computer Geek[...]
Proyecto MeteoApp | Parte #1
¿Qué vamos a construir? Vamos a construir a una app para buscar la predicción meteorológica en cualquier ciudad del mundo,[...]
Días del 2 al 4
"Si buscas resultados distintos no hagas siempre lo mismo" - Albert Einstein Estos días estoy aprendiendo a hacer loops en[...]

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Como toda web legal que se precie, utilizamos cookies para asegurar que damos la mejor experiencia al usuario en nuestro sitio web. Si continúas utilizando este sitio asumiremos que estás de acuerdo. más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar