Add countdown

Author: LMBishop

_includes/countdown.js

@@ -0,0 +1,21 @@
+const countDownDate = new Date("{{ include.date }}").getTime();
+
+document.addEventListener("DOMContentLoaded", () => {
+    (function updateTimer() {
+        let now = new Date().getTime();
+        let distance = countDownDate - now;
+        let days = Math.floor(distance / (1000 * 60 * 60 * 24));
+        let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+        let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+        let seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+        document.getElementById("days").children[0].innerHTML = String(days).padStart(2, '0');
+        document.getElementById("hours").children[0].innerHTML = String(hours).padStart(2, '0');
+        document.getElementById("minutes").children[0].innerHTML = String(minutes).padStart(2, '0');
+        document.getElementById("seconds").children[0].innerHTML = String(seconds).padStart(2, '0');
+
+        if (distance >= 0) {
+            setTimeout(updateTimer, 1000)
+        }
+    })();
+});

css/main.scss

@@ -25,6 +25,7 @@
     --color-heading-inv: #111;
     --color-text-inv: #000;
 
+    --text-smaller: 0.8rem;
     --text-small: 0.9rem;
     --text-normal: 1.05rem;
     --text-large: 1.5rem;
@@ -202,6 +203,7 @@ div.schedule {
     // background-color: var(--color-background-light);
     background-color: var(--color-background-alt);
     margin-top: 1rem;
+    padding-bottom: 2rem;
 
     div.days {
         display: flex;
@@ -273,6 +275,43 @@ div.partners-container {
     }
 }
 
+div#timer {
+    display: flex;
+    flex-direction: row;
+    gap: 2rem;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--font-monospace);
+
+    div#timer-time {
+        display: flex;
+        flex-direction: row;
+        gap: 1.5rem;
+        align-items: center;
+
+        div {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        div:not(:last-child) {
+            border-right: 1px solid var(--color-text);
+            padding-right: 1.5rem;
+        }
+
+        div span.count {
+            color: var(--color-primary);
+            font-weight: 700;
+            font-size: 3rem;
+        }
+
+        div span.label {
+            font-size: var(--text-smaller);
+        }
+    }
+}
+
 div.faqs {
 
 }
@@ -396,4 +435,8 @@ div.footer-content {
             align-items: flex-start;
         }
     }
+
+    div#timer {
+        flex-direction: column;
+    }
 }

index.html

@@ -70,19 +70,19 @@
   - name: AlgoSoc
     logo: /assets/algosoc-logo-colour.png
     colour: "0B0000"
-    url: ""
+    url: "https://www.guildofstudents.com/organisation/algosoc/"
   - name: Games Development Society
     logo: /assets/gds-logo-colour.png
     colour: "fff"
-    url: ""
+    url: "https://www.guildofstudents.com/organisation/gamesdevelopment/"
   - name: Guild of Students
     logo: /assets/gos-logo-colour.png
     colour: "eee"
     url: https://guildofstudents.com
   - name: The Univeristy of Birmingham School of Computer Science
     logo: /assets/uob-logo-colour.png
     colour: "eee"
-    url: https://cs.bham.ac.uk
+    url: https://www.cs.bham.ac.uk
 faqs:
   - question: What's a hackathon?
     answer: |
@@ -200,6 +200,44 @@ <h3 class="header">{{ day.day }}</h3>
     <p class="disclaimer">* This schedule is not final; it is subject to change.</p>
     {% endunless %}
   </div>
+
+  <div id="timer">
+    <div id="timer-time">
+      <div id="days">
+        <span class="count">
+          --
+        </span>
+        <span class="label">
+          days
+        </span>
+      </div>
+      <div id="hours">
+        <span class="count">
+          --
+        </span>
+        <span class="label">
+          hours
+        </span>
+      </div>
+      <div id="minutes">
+        <span class="count">
+          --
+        </span>
+        <span class="label">
+          minutes
+        </span>
+      </div>
+      <div id="seconds">
+        <span class="count">
+          --
+        </span>
+        <span class="label">
+          seconds
+        </span>
+      </div>
+    </div>
+    <span class="timer-label">until birmingHack starts!</span>
+  </div>
 </div>
 
 <div id="partners" class="partners section">
@@ -226,3 +264,6 @@ <h2 class="section-title">FAQs</h2>
   {% endfor %}
 </div>
 
+<script>
+{% include countdown.js date="Mar 22, 2025 09:00:00" %}
+</script>