En el capítulo anterior vimos como trabajar con los eventos del teclado, y como poder mover y hacer colisiones de objetos. En este capítulo vamos a hacer un ejercicio para crear un cuenta regresiva.
Archivos
Se ha creado el nuevo archivo llamado cuenta_regresiva.js y se ha modificado el archivo index_dom.js. Veamos la sintaxis de los archivos.
Sintaxis del archivo dom-ejercicios.html.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Ejercicios del DOM</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hamburgers/1.2.1/hamburgers.min.css" /> <link rel="stylesheet" href="dom-ejercicios.css" /> </head> <body> <header class="header"> <h1>Ejercicios del DOM</h1> </header> <button class="panel-btn hamburger hamburger--vortex" type="button"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </button> <aside class="panel"> <nav class="menu"> <a href="#seccion1">Reloj Digital y Alarma Sonora</a> <a href="#seccion2">Eventos del teclado</a> <a href="#seccion3">Cuenta Regresiva</a> <a href="#seccion4">Sección 4</a> <a href="#seccion5">Sección 5</a> </nav> </aside> <main> <section id="seccion1" class="section"> <h2>Reloj Digital y Alarma Sonora</h2> <div id="reloj"></div> <div> <button id="activar-reloj">Iniciar Reloj</button> <button id="desactivar-reloj">Detener Reloj</button> <button id="activar-alarma">Iniciar Alarma</button> <button id="desactivar-alarma">Detener Alarma</button> </div> </section> <section id="seccion2" class="section"> <h2>Eventos del teclado</h2> <article class="stage"> <div class="ball"></div> </article> </section> <section id="seccion3" class="section"> <h2>Cuenta Regresiva</h2> <div id="countdown"></div> </section> <section id="seccion4" class="section"> <h2>Sección 4</h2> </section> <section id="seccion5" class="section"> <h2>Sección 5</h2> </section> </main> <script src="index_dom.js" type="module"></script> </body> </html>
Sintaxis del archivo cuenta_regresiva.js.
const d = document;
export default function countdown(id, limitDate, finalMessage) {
const $countdown = d.getElementById(id),
countdownDate = new Date(limitDate).getTime();
let countdownTempo = setInterval(() => {
let now = new Date().getTime(),
limitTime = countdownDate - now,
days = Math.floor(limitTime / (1000 * 60 * 60 * 24)),
hours = (
"0" + Math.floor((limitTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
).slice(-2),
minutes = (
"0" + Math.floor((limitTime % (1000 * 60 * 60)) / (1000 * 60))
).slice(-2),
seconds = ("0" + Math.floor((limitTime % (1000 * 60)) / 1000)).slice(-2);
$countdown.innerHTML = `<h3>Faltan: ${days} días ${hours} horas ${minutes} minutos ${seconds} segundos</h3>`;
console.log(countdownDate, now, limitTime);
if (limitTime < 0) {
clearInterval(countdownTempo);
$countdown.innerHTML = `<h3>${finalMessage}</h3>`;
}
}, 1000);
}
Sintaxis del archivo index_dom.js.
import countdown from "./cuenta_regresiva.js";
import hamburgerMenu from "./menu_hamburguesa.js";
import { digitalClock, alarm } from "./reloj.js";
import { moveBall, shortcuts } from "./teclado.js";
const d = document;
d.addEventListener("DOMContentLoaded", (e) => {
hamburgerMenu(".panel-btn", ".panel", ".menu a");
digitalClock("#reloj", "#activar-reloj", "#desactivar-reloj");
alarm("alarma.mp3", "#activar-alarma", "#desactivar-alarma");
countdown("countdown", "Feb 14, 2024 12:32:03", "Feliz cumpleaños");
});
d.addEventListener("keydown", (e) => {
shortcuts(e);
moveBall(e, ".ball", ".stage");
});
Los archivos dom-ejercicios.html, dom-ejercicios.css, menu_hamburguesa.js, reloj.js y teclado.js se pueden encontrar en el capítulo 2 de los ejercicios del DOM.