feat: add The American countdown

OliverBooth/Pages/Shared/_Layout.cshtml

@@ -94,6 +94,12 @@
 
 <div style="margin:50px 0;"></div>
 
+<div id="usa-countdown" class="container">
+    <p>00 : 00 : 00 : 00</p>
+</div>
+
+<div style="margin:50px 0;"></div>
+
 <div class="container">
     <main role="main" class="pb-3">
         @RenderBody()

src/scss/app.scss

@@ -188,7 +188,7 @@ article {
       img {
         transform: scale(110%);
       }
-      
+
       p.project-title {
         font-size: 1.2em;
         margin: calc(-35px - .2em) 0 0;
@@ -358,4 +358,18 @@ table.reading-list {
 
 td.trim-p p:last-child {
   margin-bottom: 0;
+}
+
+#usa-countdown {
+  background-image: url('/img/us-flag-cover_512x166.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  
+  p {
+    text-align: center;
+    font-size: 3em;
+    margin: 0;
+    padding: 0;
+  }
 }

src/ts/app.ts

@@ -97,4 +97,22 @@ 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
+        if (hours < 0) hours = 0;
+        if (minutes < 0) minutes = 0;
+        if (seconds < 0) seconds = 0;
+        
+        countdown.innerHTML = `${days.toString().padStart(2, '0')} : ${hours.toString().padStart(2, '0')} : ${minutes.toString().padStart(2, '0')} : ${seconds.toString().padStart(2, '0')}`;
+    }, 1000);
 })();