En este proyecto, crearemos un countdown timer (temporizador regresivo con javascript) que se muestra centrado en la pantalla. Este temporizador será interactivo y dinámico, permitiendo a los principiantes en programación aprender conceptos básicos de HTML5, CSS3, y JavaScript.
Objetivo del proyecto: temporizador regresivo con javascript
HTML5: Definir la estructura del temporizador.
CSS3: Aplicar estilos para centrar el temporizador en la pantalla y hacerlo visualmente atractivo.
JavaScript: Programar la funcionalidad que controla la cuenta regresiva y la actualiza en tiempo real.
A continuación, vamos a detallar el código paso a paso.
Código HTML (estructura)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countdown Timer</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="countdown-container">
<h1 id="countdown">00:00:00</h1>
</div>
<script src="script.js"></script>
</body>
</html>Explicación:
<!DOCTYPE html>: Declara que estamos usando HTML5.
<html lang="en">: Define el idioma de la página como inglés.
<head> y <meta>: Configura el conjunto de caracteres (UTF-8) y el diseño adaptable (viewport) para móviles y escritorio.
<link>: Conecta el archivo CSS externo styles.css.
<div class="countdown-container">: Contiene el temporizador, que es un elemento h1 donde se mostrará la cuenta regresiva.
<script src="script.js"></script>: Conecta el archivo JavaScript externo que contiene la lógica del temporizador.
Código CSS (estilos)
/* styles.css */
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(to bottom right, #282c34, #61dafb);
font-family: Arial, sans-serif;
color: white;
}
.countdown-container {
text-align: center;
}
#countdown {
font-size: 4rem;
font-weight: bold;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}Explicación:
body (selector global):
Usa un diseño flexbox para centrar el contenido horizontal y verticalmente.
Aplica un gradiente de color como fondo.
.countdown-container: Centra el texto con text-align: center.
#countdown:
Configura un tamaño de fuente grande (4rem) para destacar la cuenta regresiva.
Añade un efecto de sombra al texto con text-shadow para un estilo más moderno.
Código JavaScript (funcionalidad)
// script.js
// Establece el tiempo inicial del temporizador en segundos (por ejemplo, 1 minuto)
let countdownTime = 60;
// Selecciona el elemento HTML donde se mostrará el temporizador
const countdownElement = document.getElementById('countdown');
// Función para convertir segundos a formato HH:MM:SS
function formatTime(seconds) {
const hours = String(Math.floor(seconds / 3600)).padStart(2, '0');
const minutes = String(Math.floor((seconds % 3600) / 60)).padStart(2, '0');
const secs = String(seconds % 60).padStart(2, '0');
return `${hours}:${minutes}:${secs}`;
}
// Función principal que ejecuta la cuenta regresiva
function startCountdown() {
const timerInterval = setInterval(() => {
// Actualiza el texto del temporizador
countdownElement.textContent = formatTime(countdownTime);
// Verifica si el tiempo ha llegado a cero
if (countdownTime <= 0) {
clearInterval(timerInterval); // Detiene el temporizador
countdownElement.textContent = "Time's up!";
} else {
countdownTime--; // Resta un segundo
}
}, 1000); // Ejecuta cada segundo
}
// Inicia el temporizador al cargar la página
startCountdown();Explicación:
let countdownTime = 60;: Define el tiempo inicial en segundos (1 minuto).
document.getElementById('countdown');: Obtiene el elemento HTML donde se mostrará la cuenta regresiva.
formatTime(seconds):
Convierte los segundos totales a un formato legible HH:MM:SS.
Usa String.padStart() para asegurarse de que cada número tenga dos dígitos.
startCountdown():
Usa setInterval() para ejecutar la lógica cada segundo.
Actualiza el contenido del elemento h1 con el tiempo restante.
Si el tiempo llega a cero, detiene el temporizador (clearInterval) y muestra «Time’s up!».
startCountdown();: Llama a la función para iniciar la cuenta regresiva al cargar la página.
Al ejecutar este código, verás un temporizador centrado en la pantalla que cuenta regresivamente desde 1 minuto. Cuando llegue a 0, mostrará el mensaje «Time’s up!». Este proyecto ayuda a entender conceptos clave de manipulación del DOM, temporizadores en JavaScript, y diseño responsivo con CSS.