Even better countdown

FRC-1721 · Feb 2, 2025 · 2129809 · 2129809
1 parent a3f6f6f
commit 2129809
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 34 deletions.
diff --git a/app/static/scripts/countdown.js 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
@@ -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
@@ -10,40 +10,10 @@
 <body>
     <div class="countdown-container">
         <h1>{{ event_name }}</h1>
-        <div id="countdown">Loading...</div>
+        <div id="countdown" data-target-time="{{ target_time }}"></div>
     </div>
 
-    <script>
-        const targetTime = {{ target_time }} * 1000; // Convert to milliseconds
-
-        function updateCountdown() {
-            const now = Date.now();
-            let timeLeft = targetTime - now;
-
-            if (timeLeft < 0) {
-                document.getElementById("countdown").innerText = "00:00:00:00.0000";
-                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 milliseconds = timeLeft % 1000;
-
-            // Ensure formatting with leading zeros
-            let countdownString = `${days.toString().padStart(3, '0')}:` +
-                `${hours.toString().padStart(2, '0')}:` +
-                `${minutes.toString().padStart(2, '0')}:` +
-                `${seconds.toString().padStart(2, '0')}.` +
-                `${milliseconds.toString().padStart(4, '0')}`;
-
-            document.getElementById("countdown").innerText = countdownString;
-        }
-
-        setInterval(updateCountdown, 10); // Update every 10ms
-        updateCountdown(); // Initial call
-    </script>
+    <script src="/static/scripts/countdown.js"></script>
 </body>
 
 </html>