lol
26 lines
862 B
JavaScript
26 lines
862 B
JavaScript
const TEMPLATE = document.createElement("template");
|
|
TEMPLATE.innerHTML = `<span class="hours">--</span><span class="deux-points">:</span><span class="minutes">--</span>`
|
|
|
|
class ClockElement extends HTMLElement {
|
|
constructor(){
|
|
super()
|
|
setInterval(this.updateContent.bind(this), 1000);
|
|
}
|
|
|
|
connectedCallback(){
|
|
this.replaceChildren(TEMPLATE.content.cloneNode(true))
|
|
this.updateContent()
|
|
}
|
|
|
|
updateContent(){
|
|
if(!this.querySelector(".hours"))
|
|
return
|
|
|
|
let now = new Date();
|
|
this.querySelector(".hours").textContent = now.getHours().toString().padStart(2, "0")
|
|
this.querySelector(".minutes").textContent = now.getMinutes().toString().padStart(2, "0")
|
|
this.setAttribute("datetime", now.toISOString())
|
|
}
|
|
}
|
|
|
|
customElements.define("gavle-clock", ClockElement) |