class LocalDate extends HTMLElement { connectedCallback() { let utcDate = new Date(this.innerText); this.innerText = utcDate.toLocaleString(); } } customElements.define("local-date", LocalDate); class TimerCountdown extends HTMLElement { startTime; endTime; refreshInterval = null; refreshCountdown() { let diff = Math.floor((this.endTime - this.startTime) / 1000); if (diff <= 0) { this.innerText = "Finished"; return; } let days = Math.floor(diff / (24 * 60 * 60)); diff -= days * 24 * 60 * 60; let hours = Math.floor(diff / (60 * 60)); diff -= hours * 60 * 60; let minutes = Math.floor(diff / 60); diff -= minutes * 60; let seconds = diff; let newText = ""; if (days > 0) { newText += `${days} days, `; } newText += `${hours.toFixed(0).padStart(2, "0")}:` + `${minutes.toFixed(0).padStart(2, "0")}:` + `${seconds.toFixed(0).padStart(2, "0")}`; this.innerText = newText; } refreshCountdownNow() { this.startTime = (new Date()).getTime(); this.refreshCountdown(); } connectedCallback() { this.endTime = (new Date(this.getAttribute("end"))).getTime(); if (this.hasAttribute("start")) { this.startTime = (new Date(this.getAttribute("start"))).getTime(); this.refreshCountdown(); } else { this.startTime = (new Date()).getTime(); this.refreshCountdown(); this.refreshInterval = setInterval(this.refreshCountdownNow.bind(this), 1000); } } disconnectedCallback() { if (this.refreshInterval !== null) { clearInterval(this.refreshInterval); } } } customElements.define("timer-countdown", TimerCountdown);