Este ejercicio sobre la creación de un módulo JS y HTML de un reloj digital te ayudará a descubrir todo lo que podrías necesitar para desarrollar web components o etiquetas de HTML personalizadas para integrarlas en el desarrollo de tus sitios web.
Así pues, a continuación vas a ver unas características de los documentos o archivos que debes tener, de las clases que debes crear y de los métodos que deben acompañar a cada una de las clases que declares dentro del módulo JS y HTML de un reloj digital.
Módulo JS y HTML de un reloj digital
En este ejercicio práctico realizamos un reloj digital que funciona como un web component, creado a partir de dos archivos dentro del mismo programa: el archivo JavaScript y el archivo HTML, donde cada uno cumple una función específica. A continuación, te contaremos en qué consiste cada uno de ellos.
¿Qué debe contener el módulo JavaScript?
En primer lugar, es importante que tengas en cuenta que para el trabajo de desarrollo de los componentes web es necesario que tengas el módulo JS y HTML de un reloj digital.
El primero de ellos es el de JavaScript, donde vas a integrar la clase que definirá el web component que vamos a crear. En este caso, será la clase de DigitalClock, que la extenderá el HTMLElement y que se construirá con un constructor y otro tipo de métodos importantes.
A su vez, tendrás que ir creando otras constantes o estados que participan en el ciclo de vida de la creación del web component.
Una de esas constantes dentro del módulo JS y HTML de un reloj digital es la del connectedCallBack y calculateCurrentTime, donde cada una de ellas cumple un objetivo específico dentro del desarrollo de un programa.
class DigitalClock extends HTMLElement {
constructor() {
super();
this.example = this.getAttribute ('example')
this.attachShadow ({ mode: 'open'})
}
window.customElement.define ('digital-clock', DigitalClock)
const templateElement = document.createElement ('template')
templateElement.innerHTML =
<style>
h1 {
color: blue;
}
</style>
<h1> </h1>
connectedCallBack() {
const template = templateElement.content.cloneNode {true}
const currentTime = this.calculateCurrentTime()
template.querySelector ('h1').textContent = currentTime
template.querySelector ('p').textcontent = this.example
setInterval/ {} => {
const currentTime = this.calculateCurrentTime { }
this.shadowRoot.querySelector ('h1').textContent = CurrentTime
}, 1000);
calculateCurrentTime() {
const now = new date();
const hours = now.getHours();
const minutes= now.getMinutes();
let seconfs = now.getSeconds();
if (minutes < 10) {
minutes = '0$ {minutes}"
}
if (seconds < 10) {
seconds= '0$ {seconds}"
}
const clockTime = '${hours}:${minutes}:${seconds}':
this.innerHTML = clockTime;
}
}Archivo HTML para un crear un reloj digital
Otro de los archivos más importantes en este ejercicio para la conformación del reloj digital es el archivo HTML, que cuenta con todo el texto y el estilo que necesitamos para pintarlo sobre la pantalla de un sitio web. A su vez, contamos con un script que relaciona el módulo JS y HTML de un reloj digital. Por eso, vamos a enlazar el script que hemos escrito en el apartado anterior a partir de la etiqueta de HTML de script.
A continuación, puedes visualizar un extracto del texto de HTML, para que puedas echarle un ojo y determinar cuáles son los requerimientos y elementos que necesitas:
<DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF - 8" />
<meta http-equiv = "Z-UA-Compatible" content =IE=edge" />
<meta name = "viewoirt" content = "width=device-width, initial-scale=1.0" />
<title> digital-clock WC </title>
<body>
<h1> user your digital-clock here! </h1>
<style>
h1 {
color: brown;
}
:root {
- - digital-clock-color; organge;
}
</style>
<h1> use yor digital-clock here! </h1>
<digital-clock example= "ejemplo de atributo"> </digital-clock>
</body>
<script type= "module" src= "./digital-clock-js" </script>
</html>Ahora, gracias a este ejercicio práctico, en el que juntamos el módulo JS y HTML de un reloj digital, sabes cómo desarrollar un web component con estas características.
Para seguir aprendiendo, no puedes perderte el Bootcamp Desarrollo Web Full Stack, la formación de alta intensidad en la que podrás dominar la teoría y la práctica del desarrollo web en muy pocos meses gracias a la guía constante de profesionales en el sector. ¡Entra ya para solicitar información y da el paso que cambiará tu vida!
