From e052f0c7370c5718bac74512ca36336de2fe27e1 Mon Sep 17 00:00:00 2001 From: James Dinh Date: Fri, 16 Dec 2022 12:24:55 -0800 Subject: [PATCH] Automated timer --- css/general.css | 4 +-- index.html | 6 ++-- js/general.js | 76 ++++++++++++++++++++++++++++++------------------- 3 files changed, 52 insertions(+), 34 deletions(-) diff --git a/css/general.css b/css/general.css index 739c07f..b0d434b 100644 --- a/css/general.css +++ b/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; diff --git a/index.html b/index.html index 3f12d1c..c1f49f3 100644 --- a/index.html +++ b/index.html @@ -80,7 +80,7 @@ @@ -455,8 +455,8 @@
-
Hacking EndsDeadline: 2pm
-
Project PresentationsStart 2:15pm
+
Hacking endsDeadline: 2pm
+
Project Presentations2:30 - 4pm
Judging4 - 4:30pm
Awards Ceremony4:30 - 5pm
diff --git a/js/general.js b/js/general.js index a7a5dbc..462cb13 100644 --- a/js/general.js +++ b/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 - var now = new Date().getTime(); + // Find the distance between now and the count down date + var distance = countDownDate - now; - // Find the distance between now and the count down date - var distance = countDownDate - now; + // Time calculations for days, hours, minutes and seconds + 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 - 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); - - // If the count down is finished, write some text - if (distance < 0) { - clearInterval(x); - document.getElementById("timer").innerHTML = "---"; - } - // Display the result in the element with id="timer" - else if (days != 0) { - document.getElementById("timer").innerHTML = days + "d " + hours + "h"; - } - else if (hours != 0) { - document.getElementById("timer").innerHTML = hours + "h " + minutes + "m"; - } - else { - document.getElementById("timer").innerHTML = minutes + "m"; - } + // If the count down is finished, write some text + if (distance < 0) { + clearInterval(x); + document.getElementById("timer").innerHTML = "---"; + document.getElementById("event-name").innerHTML = "Event Ended"; + } + // Display the result in the element with id="timer" + else if (days != 0) { + document.getElementById("timer").innerHTML = days + "d " + hours + "h"; + } + else if (hours != 0) { + document.getElementById("timer").innerHTML = hours + "h " + minutes + "m"; + } + else { + document.getElementById("timer").innerHTML = minutes + "m"; + } }, 1000); });