Automated timer

This commit is contained in:
James Dinh 2022-12-16 12:24:55 -08:00
parent cb6df11b3a
commit e052f0c737
3 changed files with 52 additions and 34 deletions

View File

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

View File

@ -80,7 +80,7 @@
<img id="nav-logo" src="img/Gilroy_Hacks_Banner_Spring.png" alt="logo"/> <img id="nav-logo" src="img/Gilroy_Hacks_Banner_Spring.png" alt="logo"/>
</a> </a>
<div id="banner"> <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> <span id="timer">---</span>
</p> </p>
</div> </div>
@ -455,8 +455,8 @@
<div class="event start-1100 end-1100 length-4 empty"></div> <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-1200 end-1200 length-4 empty"></div>
<div class="event start-1300 end-1300 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">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-1600 end-1600 length-2">Awards Ceremony<span>4:30 - 5pm</span></div>
<div class="event start-1700 end-1700 length-4 empty"></div> <div class="event start-1700 end-1700 length-4 empty"></div>

View File

@ -135,7 +135,7 @@ document.addEventListener('DOMContentLoaded', function(){
observer.observe(entry); observer.observe(entry);
}); });
// Adding the class animations to these elements // Add class animations to these elements
let elements_id = [ let elements_id = [
'#description-heading', '#description-heading',
'#event-main-box', '#event-main-box',
@ -168,8 +168,6 @@ document.addEventListener('DOMContentLoaded', function(){
observer_prize_3.observe(document.querySelector('#third-place')); observer_prize_3.observe(document.querySelector('#third-place'));
// Scroll Nav // Scroll Nav
// Gilroy Hacks Website Source Code -> JS (https://gilroyhacks.com)
// Toggle the .pa-fixed-header class when the user // Toggle the .pa-fixed-header class when the user
// scroll 100px // scroll 100px
@ -203,38 +201,58 @@ document.addEventListener('DOMContentLoaded', function(){
// Timer // Timer
// SRC: W3Schools https://www.w3schools.com/howto/howto_js_countdown.asp // SRC: W3Schools https://www.w3schools.com/howto/howto_js_countdown.asp
// Set the date we're counting down to // 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 // Update the count down every 1 second
var x = setInterval(function() { 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); }, 1000);
}); });