Este ejercicio es la continuación del ejercicio del capítulo anterior, por lo que vamos a utilizar los mismos archivos, pero vamos a incluirles archivos nuevos, que forman parte justamente de este ejercicio. Para este ejercicio vamos a tener 5 archivos, que son:
- dom-ejercicios.css
- dom-ejercicios.html
- index_dom.js
- menu_hamburguesa.js
- reloj.js
Además, tenemos que bajarnos de internet un pequeño audio que sea una alarma, dándole el nombre alarm.mp3.
El archivo dom-ejercicios.css tiene la siguiente sintaxis.
/* **** Reset CSS **** */
:root {
--main-font: sans-serif;
--font-size: 16px;
--main-color: #f7df1e;
--second-color: #222;
--main-modal-color: rgba(247, 222, 30, 0.85);
--second-modal-color: rgba(34, 34, 34, 0.85);
--container-width: 1200px;
}
html {
box-sizing: border-box;
font-family: var(--main-font);
font-size: var(--font-size);
scroll-behavior: smooth;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
overflow-x: hidden;
}
img {
max-width: 100%;
height: auto;
}
/* **** Menú Hamburguesa **** */
.header {
position: sticky;
top: 0;
padding: 1rem;
background-color: var(--main-color);
color: var(--second-color);
}
.header h1 {
margin: 0 auto;
text-align: center;
}
.section {
padding: 2rem;
padding-top: 4rem;
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: var(--container-width);
min-height: 100vh;
text-align: center;
}
.panel {
position: fixed;
z-index: 998;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
background-color: var(--second-modal-color);
transition: transform 0.3s ease, opacity 0.5s ease;
/* De arriba */
transform: translate(0, -100%);
/* De abajo */
transform: translate(0, 100%);
/* De izda */
transform: translate(-100%, 0);
/* De dcha */
transform: translate(100%, 0);
/* Opacidad */
opacity: 0;
visibility: hidden;
}
.panel.is-active {
transform: translate(0, 0);
opacity: 1;
visibility: visible;
}
.panel-btn {
position: fixed;
z-index: 999;
bottom: 1vh;
right: 1vw;
width: 4rem;
height: 4rem;
border-radius: 50%;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--main-color);
}
.menu {
width: inherit;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
text-align: center;
}
.menu a {
padding: 2rem;
width: inherit;
display: block;
font-size: 1.5rem;
text-decoration: none;
color: var(--main-color);
transition: all 0.3s ease;
}
.menu a:hover {
font-weight: bold;
color: var(--second-color);
background-color: var(--main-modal-color);
}
El archivo dom-ejercicios.html tiene la siguiente sintaxis.
<!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">Sección 2</a> <a href="#seccion3">Sección 3</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>Sección 2</h2> </section> <section id="seccion3" class="section"> <h2>Sección 3</h2> </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>
El archivo index_dom.js tiene la siguiente sintaxis.
import hamburgerMenu from "./menu_hamburguesa.js";
import { digitalClock, alarm } from "./reloj.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");
});
El archivo menu_hamburguesa.js tiene la siguiente sintaxis.
export default function hamburgerMenu(panelBtn, panel, menuLink) {
const d = document;
d.addEventListener("click", (e) => {
if (e.target.matches(panelBtn) || e.target.matches(`${panelBtn} *`)) {
d.querySelector(panel).classList.toggle("is-active");
d.querySelector(panelBtn).classList.toggle("is-active");
}
if (e.target.matches(menuLink)) {
d.querySelector(panel).classList.remove("is-active");
d.querySelector(panelBtn).classList.remove("is-active");
}
});
}
El archivo reloj.js tiene la siguiente sintaxis.
const d = document;
export function digitalClock(clock, btnPlay, btnStop) {
let clockTempo;
d.addEventListener("click", (e) => {
if (e.target.matches(btnPlay)) {
clockTempo = setInterval(() => {
let clockHour = new Date().toLocaleTimeString();
d.querySelector(clock).innerHTML = `<h3>${clockHour}</h3>`;
}, 1000);
e.target.disabled = true;
}
if (e.target.matches(btnStop)) {
clearInterval(clockTempo);
d.querySelector(clock).innerHTML = null;
document.querySelector(btnPlay).disabled = false;
}
});
}
export function alarm(sound, btnPlay, btnStop) {
let alarmTempo;
const $alarm = d.createElement("audio");
$alarm.src = sound;
d.addEventListener("click", (e) => {
if (e.target.matches(btnPlay)) {
alarmTempo = setTimeout(() => {
$alarm.play();
}, 2000);
e.target.disabled = true;
}
if (e.target.matches(btnStop)) {
clearTimeout(alarmTempo);
$alarm.pause();
$alarm.currentTime = 0;
document.querySelector(btnPlay).disabled = false;
}
});
}