Keith Casko
43 lines
1.2 KiB
JavaScript
43 lines
1.2 KiB
JavaScript
const timeElement = document.querySelector("#local-time");
|
|
const refreshElement = document.querySelector("#refresh-indicator");
|
|
const counters = document.querySelectorAll("[data-count]");
|
|
|
|
function updateClock() {
|
|
const now = new Date();
|
|
timeElement.textContent = new Intl.DateTimeFormat("en-US", {
|
|
timeZone: "America/New_York",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
second: "2-digit",
|
|
hour12: false,
|
|
}).format(now);
|
|
}
|
|
|
|
let secondsSinceRefresh = 0;
|
|
|
|
function updateRefreshState() {
|
|
refreshElement.textContent = `UPDATED ${String(secondsSinceRefresh).padStart(2, "0")}s AGO`;
|
|
secondsSinceRefresh = (secondsSinceRefresh + 1) % 60;
|
|
}
|
|
|
|
function animateCounters() {
|
|
counters.forEach((counter) => {
|
|
const target = Number(counter.dataset.count);
|
|
let current = 0;
|
|
const increment = Math.max(1, Math.ceil(target / 18));
|
|
|
|
const timer = window.setInterval(() => {
|
|
current = Math.min(target, current + increment);
|
|
counter.textContent = current;
|
|
if (current === target) window.clearInterval(timer);
|
|
}, 45);
|
|
});
|
|
}
|
|
|
|
updateClock();
|
|
updateRefreshState();
|
|
animateCounters();
|
|
|
|
window.setInterval(updateClock, 1000);
|
|
window.setInterval(updateRefreshState, 1000);
|