Automated timer

css/general.css

@@ -172,12 +172,12 @@ nav ul li {
 }
 
 #timer::after {
-  content: 'Apr 15, 9pm';
+  content: 'Apr 15, 10am';
   position: absolute;
   text-align: center;
   align-items: center;
   top: 30px;
-  right: -20%;
+  right: -28%;
   padding: 2px 7px;
   width: max-content;
   opacity: 1;

index.html

@@ -80,7 +80,7 @@
             <img id="nav-logo" src="img/Gilroy_Hacks_Banner_Spring.png" alt="logo"/>
         </a>
         <div id="banner">
-            <p id="banner-text"><a class="navlink" id="timer-link" href="./">Next Hackathon</a> in
+            <p id="banner-text"><a class="navlink" id="timer-link" href="./"><span id="event-name">loading...</span></a>in
                 <span id="timer">---</span>
             </p>
         </div>
@@ -455,8 +455,8 @@
                         <div class="event start-1100 end-1100 length-4 empty"></div>
                         <div class="event start-1200 end-1200 length-4 empty"></div>
                         <div class="event start-1300 end-1300 length-4 empty"></div>
-                        <div class="event hacking start-1400 end-1400 length-1 small">Hacking Ends<span>Deadline: 2pm</span></div>
+                        <div class="event hacking start-1400 end-1400 length-1 small">Hacking ends<span>Deadline: 2pm</span></div>
-                        <div class="event logistics start-1400 end-1500 length-3">Project Presentations<span>Start 2:15pm</span></div>
+                        <div class="event logistics start-1400 end-1500 length-3">Project Presentations<span>2:30 - 4pm</span></div>
                         <div class="event start-1600 end-1600 length-2">Judging<span>4 - 4:30pm</span></div>
                         <div class="event start-1600 end-1600 length-2">Awards Ceremony<span>4:30 - 5pm</span></div>
                         <div class="event start-1700 end-1700 length-4 empty"></div>

js/general.js

@@ -135,7 +135,7 @@ document.addEventListener('DOMContentLoaded', function(){
         observer.observe(entry);
     });
 
-    // Adding the class animations to these elements
+    // Add class animations to these elements
     let elements_id = [
       '#description-heading',
       '#event-main-box',
@@ -168,8 +168,6 @@ document.addEventListener('DOMContentLoaded', function(){
     observer_prize_3.observe(document.querySelector('#third-place'));
 
     // Scroll Nav
-    // Gilroy Hacks Website Source Code -> JS (https://gilroyhacks.com)
-
     // Toggle the .pa-fixed-header class when the user 
     // scroll 100px 
 
@@ -203,38 +201,58 @@ document.addEventListener('DOMContentLoaded', function(){
     // Timer
     // SRC: W3Schools https://www.w3schools.com/howto/howto_js_countdown.asp
     // Set the date we're counting down to
-    var countDownDate = new Date("Apr 15, 2023 12:00:00").getTime();
+    const events = {
+      "Opening Ceremony": "Apr 15, 2023 10:00:00",
+      "Lunch": "Apr 15, 2023 12:00:00",
+      "Web Dev Workshop": "Apr 15, 2023 13:00:00",
+      "[REDACTED] Workshop": "Apr 15, 2023 15:00:00",
+      "Kahoot": "Apr 15, 2023 17:00:00",
+      "Hacking Ends": "Apr 16, 2023 14:00:00",
+      "Project Presentations": "Apr 16, 2023 14:30:00",
+      "Awards Ceremony" : "Apr 16, 2023 16:30:00"
+    }
+    var countDownDate = 0;
+    // Get today's date and time
+    var now = new Date().getTime();
+
+    // Test for the current event
+    for (const event in events) {
+      var testDate = new Date(events[event]).getTime();
+      if (testDate > countDownDate && now < testDate) {
+        countDownDate = testDate;
+        document.getElementById("event-name").innerHTML = event;
+        break;
+      }
+    }
 
     // Update the count down every 1 second
     var x = setInterval(function() {
 
-    // Get today's date and time
+      // Find the distance between now and the count down date
-    var now = new Date().getTime();
+      var distance = countDownDate - now;
 
-    // Find the distance between now and the count down date
+      // Time calculations for days, hours, minutes and seconds
-    var distance = countDownDate - now;
+      var days = Math.floor(distance / (1000 * 60 * 60 * 24));
+      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+      // var seconds = Math.floor((distance % (1000 * 60)) / 1000);
 
-    // Time calculations for days, hours, minutes and seconds
+      // If the count down is finished, write some text
-    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
+      if (distance < 0) {
-    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+          clearInterval(x);
-    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+          document.getElementById("timer").innerHTML = "---";
-    // var seconds = Math.floor((distance % (1000 * 60)) / 1000);
+          document.getElementById("event-name").innerHTML = "Event Ended";
-
+      }
-    // If the count down is finished, write some text
+      // Display the result in the element with id="timer"
-    if (distance < 0) {
+      else if (days != 0) {
-        clearInterval(x);
+          document.getElementById("timer").innerHTML = days + "d " + hours + "h";
-        document.getElementById("timer").innerHTML = "---";
+      }
-    }
+      else if (hours != 0) {
-    // Display the result in the element with id="timer"
+          document.getElementById("timer").innerHTML = hours + "h " + minutes + "m";
-    else if (days != 0) {
+      }
-        document.getElementById("timer").innerHTML = days + "d " + hours + "h";
+      else {
-    }
+          document.getElementById("timer").innerHTML = minutes + "m";
-    else if (hours != 0) {
+      }
-        document.getElementById("timer").innerHTML = hours + "h " + minutes + "m";
-    }
-    else {
-        document.getElementById("timer").innerHTML = minutes + "m";
-    }
     }, 1000);
 });