style: improve appearance of the american countdown

OliverBooth/Pages/Shared/_Layout.cshtml

@@ -95,7 +95,12 @@
 <div style="margin:50px 0;"></div>
 
 <div id="usa-countdown" class="container">
-    <p>00 : 00 : 00 : 00</p>
+    <div class="row">
+        <div class="col-3 usa-countdown-element" id="usa-countdown-days">00</div>
+        <div class="col-3 usa-countdown-element" id="usa-countdown-hours">00</div>
+        <div class="col-3 usa-countdown-element" id="usa-countdown-minutes">00</div>
+        <div class="col-3 usa-countdown-element" id="usa-countdown-seconds">00</div>
+    </div>
 </div>
 
 <div style="margin:50px 0;"></div>

src/scss/app.scss

@@ -365,25 +365,27 @@ td.trim-p p:last-child {
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
-  
+  border-radius: 10px;
-  p {
+  cursor: pointer;
+  * {
+    cursor: pointer;
+  }
+
+  .usa-countdown-element {
+    margin: 10px 0;
+    padding: 5px;
     font-family: "Gabarito", sans-serif;
     font-weight: 500;
     text-align: center;
     font-size: 3em;
-    margin: 0;
+    border-right: 2px solid #fff;
-    padding: 0;
+    border-left: 2px solid #fff;
-    
-    a {
-      transition: color 250ms;
-    }
 
-    a:link, a:visited, a:active {
+    &:first-child {
-      color: #fff;
+      border-left: none;
     }
-
+    &:last-child {
-    a:hover {
+      border-right: none;
-      color: #03A9F4;
     }
   }
 }

src/ts/UI.ts

@@ -82,6 +82,33 @@ class UI {
         UI.updateProjectCards(element);
     }
 
+    public static updateUsaCountdown(element?: Element){
+        element = element || document.getElementById("usa-countdown");
+        
+        const daysElement = element.querySelector("#usa-countdown-days");
+        const hoursElement = element.querySelector("#usa-countdown-hours");
+        const minutesElement = element.querySelector("#usa-countdown-minutes");
+        const secondsElement = element.querySelector("#usa-countdown-seconds");
+
+        const start = new Date().getTime();
+        const end = Date.UTC(2024, 2, 7, 13, 20);
+        const diff = end - start;
+        let days = Math.floor(diff / (1000 * 60 * 60 * 24));
+        let hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+        let minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+        let seconds = Math.floor((diff % (1000 * 60)) / 1000);
+
+        if (days < 0) days = 0
+        if (hours < 0) hours = 0;
+        if (minutes < 0) minutes = 0;
+        if (seconds < 0) seconds = 0;
+
+        daysElement.innerHTML = days.toString().padStart(2, '0');
+        hoursElement.innerHTML = hours.toString().padStart(2, '0');
+        minutesElement.innerHTML = minutes.toString().padStart(2, '0');
+        secondsElement.innerHTML = seconds.toString().padStart(2, '0');
+    }
+
     /**
      * Adds Bootstrap tooltips to all elements with a title attribute.
      * @param element The element to search for elements with a title attribute in.

src/ts/app.ts

@@ -97,27 +97,9 @@ declare const Prism: any;
     }
 
     UI.updateUI();
-    
-    setInterval(() => {
-        const countdown = document.querySelector("#usa-countdown p");
-        const start = new Date().getTime();
-        const end = Date.UTC(2024, 2, 7, 13, 20);
-        const diff = end - start;
-        let days = Math.floor(diff / (1000 * 60 * 60 * 24));
-        let hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
-        let minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
-        let seconds = Math.floor((diff % (1000 * 60)) / 1000);
 
-        if (days < 0) days = 0
+    const usaCountdown = document.getElementById("usa-countdown");
-        if (hours < 0) hours = 0;
+    usaCountdown.addEventListener("click", () => window.location.href = "/blog/2024/02/19/the-american");
-        if (minutes < 0) minutes = 0;
+    UI.updateUsaCountdown(usaCountdown);
-        if (seconds < 0) seconds = 0;
+    setInterval(() => UI.updateUsaCountdown(usaCountdown), 1000);
-        
-        const blogUrl = '/blog/2024/02/19/the-american';
-        const dayStr = days.toString().padStart(2, '0');
-        const hourStr = hours.toString().padStart(2, '0');
-        const minuteStr = minutes.toString().padStart(2, '0');
-        const secondStr = seconds.toString().padStart(2, '0');
-        countdown.innerHTML = `<a href="${blogUrl}">${dayStr} : ${hourStr} : ${minuteStr} : ${secondStr}</a>`;
-    }, 1000);
 })();