// countdown-element.js
// Load this as your custom element file in Wix
class CountdownElement extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
}
connectedCallback() {
// target date (start of 9/28/2026, local time)
const targetDate = new Date(2026, 8, 28, 0, 0, 0);
// initial DOM
this.shadowRoot.innerHTML = `
Countdown to September 28, 2026
Today is the day — congratulations!
`;
this.daysEl = this.shadowRoot.getElementById("days");
this.hoursEl = this.shadowRoot.getElementById("hours");
this.minutesEl = this.shadowRoot.getElementById("minutes");
this.secondsEl = this.shadowRoot.getElementById("seconds");
this.finishedEl = this.shadowRoot.getElementById("finished");
const pad2 = (n) => String(n).padStart(2, "0");
const update = () => {
const now = new Date();
let diff = targetDate - now;
if (diff <= 0) {
this.daysEl.textContent = "0";
this.hoursEl.textContent = "00";
this.minutesEl.textContent = "00";
this.secondsEl.textContent = "00";
this.finishedEl.style.display = "block";
clearInterval(this.timer);
return;
}
const msInSec = 1000;
const msInMin = msInSec * 60;
const msInHour = msInMin * 60;
const msInDay = msInHour * 24;
const days = Math.floor(diff / msInDay);
diff -= days * msInDay;
const hours = Math.floor(diff / msInHour);
diff -= hours * msInHour;
const minutes = Math.floor(diff / msInMin);
diff -= minutes * msInMin;
const seconds = Math.floor(diff / msInSec);
this.daysEl.textContent = String(days);
this.hoursEl.textContent = pad2(hours);
this.minutesEl.textContent = pad2(minutes);
this.secondsEl.textContent = pad2(seconds);
};
update();
this.timer = setInterval(update, 1000);
}
disconnectedCallback() {
clearInterval(this.timer);
}
}
// Register the element
customElements.define("countdown-element", CountdownElement);
top of page
bottom of page
