Creación de un reloj digital con HTML, CSS y JavaScript

En la era digital, aprender a crear un reloj digital es una habilidad fundamental para cualquier desarrollador web. En este artículo, exploraremos cómo construir un reloj digital utilizando HTML, CSS y JavaScript. Este proyecto no solo es educativo, sino que también demuestra la interactividad de la web moderna. ¡Comencemos!

¿Qué vamos a aprender?

A lo largo de este artículo, aprenderemos:

Cómo estructurar nuestro HTML.
Estilizar el reloj utilizando CSS.
Implementar la lógica del reloj con JavaScript.

Estructura del proyecto

Antes de sumergirnos en el código, organicemos nuestro proyecto con la siguiente estructura de archivos:

reloj-digital/
│
├── index.html
├── styles.css
└── script.js

Creando el archivo HTML

Primero, abramos el archivo index.html y sus características básicas. Este archivo contendrá la estructura de nuestro reloj digital.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reloj Digital</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="reloj">
        <h1 id="tiempo">00:00:00</h1>
        <p id="fecha"></p>
    </div>
    <script src="script.js"></script>
</body>
</html>

Descripción del HTML

DOCTYPE y Etiquetas Iniciales: Estamos utilizando el tipo de documento HTML5.
Meta Tags: Establecen la codificación y la visibilidad en dispositivos móviles.
Enlace a CSS: Conectamos nuestro archivo CSS (styles.css).
Estructura de la Reloj: Un div con el identificador reloj incluye un encabezado h1 para mostrar la hora y un párrafo para la fecha.
Script de JavaScript: Incluimos el archivo script.js para manejar la lógica del reloj.

Estilizando el reloj con CSS

Ahora que nuestra estructura básica está lista, pasemos a estilizar nuestro reloj en el archivo styles.css.

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

.reloj {
    text-align: center;
    border: 2px solid #61dafb;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

h1 {
    font-size: 48px;
    margin: 0;
}

p {
    font-size: 24px;
}

Análisis del CSS

Estilos del Body: Se usamos flex para centrar el contenido vertical y horizontalmente. También establecemos un fondo oscuro y un esquema de colores contrastantes.
Estilo de la Reloj: Aplicamos bordes, relleno y sombras para mejorar la estética.
Tamaños Ajustados: Los tamaños de fuente están ajustados para resaltar la hora y la fecha.

Implementando la lógica con JavaScript

Finalmente, implementaremos la funcionalidad del reloj en nuestro archivo script.js. Esto actualizará la hora automáticamente cada segundo.

function actualizarReloj() {
    const ahora = new Date();
    const horas = String(ahora.getHours()).padStart(2, '0');
    const minutos = String(ahora.getMinutes()).padStart(2, '0');
    const segundos = String(ahora.getSeconds()).padStart(2, '0');
    const tiempo = `${horas}:${minutos}:${segundos}`;
    document.getElementById('tiempo').textContent = tiempo;

    const opcionesFecha = { year: 'numeric', month: 'long', day: 'numeric' };
    const fecha = ahora.toLocaleDateString('es-ES', opcionesFecha);
    document.getElementById('fecha').textContent = fecha;
}

// Actualizar cada segundo
setInterval(actualizarReloj, 1000);
// Llamar a la función para establecer el reloj inmediatamente al cargar la página
actualizarReloj();

Desglose de JavaScript

Función actualizarReloj: Esta función obtiene la hora actual y la formatea. La función padStart(2, '0') asegura que siempre tengamos dos dígitos.
Actualizar el DOM: Usamos document.getElementById para acceder a nuestros elementos HTML y actualizar su contenido.
setInterval: Se llama a la función actualizarReloj cada 1000 milisegundos (1 segundo) para que el reloj se mantenga actualizado.
Ejecutar al Cargar: Llamamos a actualizarReloj al cargar la página para mostrar la hora inmediatamente.

Prueba tu reloj digital

Ahora que hemos completado nuestro código, abre el archivo index.html en tu navegador. Deberías ver un reloj digital que se actualiza cada segundo, mostrando la hora y la fecha actuales.