From 2129809f24cc16b21845ec40d571011c734897ea Mon Sep 17 00:00:00 2001 From: KenwoodFox Date: Sun, 2 Feb 2025 16:39:27 -0500 Subject: [PATCH] Even better countdown --- app/static/scripts/countdown.js | 31 ++++++++++++++++++++++++++++++ app/static/styles/countdown.css | 4 ++-- app/templates/countdown.html | 34 ++------------------------------- 3 files changed, 35 insertions(+), 34 deletions(-) create mode 100644 app/static/scripts/countdown.js diff --git a/app/static/scripts/countdown.js b/app/static/scripts/countdown.js new file mode 100644 index 0000000..4147357 --- /dev/null +++ b/app/static/scripts/countdown.js @@ -0,0 +1,31 @@ +document.addEventListener("DOMContentLoaded", () => { + const countdownElement = document.getElementById("countdown"); + const targetTime = parseInt(countdownElement.dataset.targetTime) * 1000; // Convert to milliseconds + + function updateCountdown() { + const now = Date.now(); + let timeLeft = targetTime - now; + + if (timeLeft < 0) { + countdownElement.innerText = "000:00:00:00.00"; + return; + } + + let days = Math.floor(timeLeft / (1000 * 60 * 60 * 24)); + let hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); + let minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60)); + let seconds = Math.floor((timeLeft % (1000 * 60)) / 1000); + let tenths = Math.floor((timeLeft % 1000) / 10); // Extract tenths & hundredths + + let countdownString = `${days.toString().padStart(3, '0')}:` + + `${hours.toString().padStart(2, '0')}:` + + `${minutes.toString().padStart(2, '0')}:` + + `${seconds.toString().padStart(2, '0')}.` + + `${tenths.toString().padStart(2, '0')}`; // Show two-digit tenths & hundredths + + countdownElement.innerText = countdownString; + } + + setInterval(updateCountdown, 10); // Update every 10ms + updateCountdown(); +}); diff --git a/app/static/styles/countdown.css b/app/static/styles/countdown.css index c44883b..eebdbec 100644 --- a/app/static/styles/countdown.css +++ b/app/static/styles/countdown.css @@ -10,13 +10,13 @@ body { } h1 { - font-size: 8em; + font-size: 12em; color: rgb(163, 0, 46); text-shadow: 2px 2px 5px red; } #countdown { - font-size: 7em; + font-size: 10em; font-weight: bold; letter-spacing: 5px; background: rgb(40, 40, 40); diff --git a/app/templates/countdown.html b/app/templates/countdown.html index f1378b8..8886fef 100644 --- a/app/templates/countdown.html +++ b/app/templates/countdown.html @@ -10,40 +10,10 @@

{{ event_name }}

-
Loading...
+
- + \ No newline at end of file