Automated timer
This commit is contained in:
parent
cb6df11b3a
commit
e052f0c737
@ -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;
|
||||
|
@ -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 logistics start-1400 end-1500 length-3">Project Presentations<span>Start 2:15pm</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>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>
|
||||
|
@ -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,14 +201,33 @@ 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;
|
||||
|
||||
@ -224,6 +241,7 @@ document.addEventListener('DOMContentLoaded', function(){
|
||||
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) {
|
||||
|
Loading…
Reference in New Issue
Block a user