Added timer labels
This commit is contained in:
parent
e052f0c737
commit
6360b55d74
@ -21,7 +21,7 @@
|
||||
|
||||
<!-- JavaScript Refs -->
|
||||
<script src="js/jquery-3.6.0.min.js"></script>
|
||||
<script defer src="js/licenses.js"></script>
|
||||
<script defer src="js/second.js"></script>
|
||||
<script defer src="js/contact.js"></script>
|
||||
<style>
|
||||
@font-face {
|
||||
@ -66,7 +66,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="./#timeline">Next Hackathon</a> in
|
||||
<p id="banner-text"><a class="navlink" id="timer-link" href="./#schedule-heading"><span id="event-name">loading...</span></a>in
|
||||
<span id="timer">---</span>
|
||||
</p>
|
||||
</div>
|
||||
|
@ -177,7 +177,7 @@ nav ul li {
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
top: 30px;
|
||||
right: -28%;
|
||||
right: -60%;
|
||||
padding: 2px 7px;
|
||||
width: max-content;
|
||||
opacity: 1;
|
||||
@ -801,7 +801,6 @@ section {
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
#timeline-heading {
|
||||
@ -1591,6 +1590,11 @@ section {
|
||||
}
|
||||
|
||||
/* Schedule */
|
||||
|
||||
#schedule-heading {
|
||||
padding-top: 70px;
|
||||
}
|
||||
|
||||
.schedule-parent {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
@ -302,7 +302,7 @@ nav ul li {
|
||||
}
|
||||
@media (max-width: 470px) {
|
||||
#nav-logo {
|
||||
content: url(/img/Gilroy-Hacks-Logo-icon-tp.ico);
|
||||
content: url(/img/logo_mini.png);
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
@ -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="./"><span id="event-name">loading...</span></a>in
|
||||
<p id="banner-text"><a class="navlink" id="timer-link" href="#schedule-heading"><span id="event-name">loading...</span></a>in
|
||||
<span id="timer">---</span>
|
||||
</p>
|
||||
</div>
|
||||
|
@ -221,6 +221,7 @@ document.addEventListener('DOMContentLoaded', function(){
|
||||
if (testDate > countDownDate && now < testDate) {
|
||||
countDownDate = testDate;
|
||||
document.getElementById("event-name").innerHTML = event;
|
||||
document.styleSheets[0].addRule('#timer:after','content: "'+ events[event] +'";');
|
||||
break;
|
||||
}
|
||||
}
|
||||
@ -368,4 +369,4 @@ var options = {
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#chart"), options);
|
||||
chart.render();
|
||||
chart.re
|
@ -1,82 +0,0 @@
|
||||
// Scroll Nav
|
||||
// Gilroy Hacks Website Source Code -> JS (https://gilroyhacks.com)
|
||||
|
||||
// Toggle the .pa-fixed-header class when the user
|
||||
// scroll 100px
|
||||
|
||||
window.onscroll = () => {scrollNavbar()};
|
||||
|
||||
var scrollNavbar = () => {
|
||||
// Target elements
|
||||
const navBar = document.getElementById("navBar");
|
||||
const links = document.querySelectorAll("#navBar a");
|
||||
|
||||
if (document.documentElement.scrollTop > 20) {
|
||||
navBar.classList.add("pa-fixed-header");
|
||||
|
||||
// Change the color of links on scroll
|
||||
for (let i = 0; i < links.length; i++) {
|
||||
const element = links[i];
|
||||
element.classList.add('text-black');
|
||||
}
|
||||
|
||||
} else {
|
||||
navBar.classList.remove("pa-fixed-header");
|
||||
|
||||
// Change the color of links back to default
|
||||
for (let i = 0; i < links.length; i++) {
|
||||
const element = links[i];
|
||||
element.classList.remove('text-black');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Email Replace
|
||||
function setAttributes(elem, attrs) {
|
||||
for(var key in attrs) {
|
||||
elem.setAttribute(key, attrs[key]);
|
||||
}
|
||||
}
|
||||
|
||||
const tech_emails = document.querySelectorAll('.email-replace-tech');
|
||||
tech_emails.forEach(entry => {
|
||||
setAttributes(entry, {"href": "mailto:tech" + "@" + "gilroyhacks.com?subject=Gilroy Hacks", "target": "_blank"});
|
||||
entry.innerHTML = "tech" + "@" + "gilroyhacks.com";
|
||||
});
|
||||
|
||||
// Timer
|
||||
// SRC: W3Schools https://www.w3schools.com/howto/howto_js_countdown.asp
|
||||
// Set the date we're counting down to
|
||||
var countDownDate = new Date("Aug 14, 2022 14:00:00").getTime();
|
||||
|
||||
// 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;
|
||||
|
||||
// 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 = "TBA";
|
||||
}
|
||||
// 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);
|
103
js/second.js
Normal file
103
js/second.js
Normal file
@ -0,0 +1,103 @@
|
||||
// Scroll Nav
|
||||
// Gilroy Hacks Website Source Code -> JS (https://gilroyhacks.com)
|
||||
|
||||
// Toggle the .pa-fixed-header class when the user
|
||||
// scroll 100px
|
||||
|
||||
window.onscroll = () => {scrollNavbar()};
|
||||
|
||||
var scrollNavbar = () => {
|
||||
// Target elements
|
||||
const navBar = document.getElementById("navBar");
|
||||
const links = document.querySelectorAll("#navBar a");
|
||||
|
||||
if (document.documentElement.scrollTop > 20) {
|
||||
navBar.classList.add("pa-fixed-header");
|
||||
|
||||
// Change the color of links on scroll
|
||||
for (let i = 0; i < links.length; i++) {
|
||||
const element = links[i];
|
||||
element.classList.add('text-black');
|
||||
}
|
||||
|
||||
} else {
|
||||
navBar.classList.remove("pa-fixed-header");
|
||||
|
||||
// Change the color of links back to default
|
||||
for (let i = 0; i < links.length; i++) {
|
||||
const element = links[i];
|
||||
element.classList.remove('text-black');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Email Replace
|
||||
function setAttributes(elem, attrs) {
|
||||
for(var key in attrs) {
|
||||
elem.setAttribute(key, attrs[key]);
|
||||
}
|
||||
}
|
||||
|
||||
const tech_emails = document.querySelectorAll('.email-replace-tech');
|
||||
tech_emails.forEach(entry => {
|
||||
setAttributes(entry, {"href": "mailto:tech" + "@" + "gilroyhacks.com?subject=Gilroy Hacks", "target": "_blank"});
|
||||
entry.innerHTML = "tech" + "@" + "gilroyhacks.com";
|
||||
});
|
||||
|
||||
// Timer
|
||||
// SRC: W3Schools https://www.w3schools.com/howto/howto_js_countdown.asp
|
||||
// Set the date we're counting down to
|
||||
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;
|
||||
document.styleSheets[0].addRule('#timer:after','content: "'+ events[event] +'";');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Update the count down every 1 second
|
||||
var x = setInterval(function() {
|
||||
|
||||
// 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);
|
||||
|
||||
// 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);
|
@ -20,7 +20,7 @@
|
||||
<link rel="icon" href="img/icon.ico">
|
||||
|
||||
<!-- JavaScript Refs -->
|
||||
<script defer src="js/licenses.js"></script>
|
||||
<script defer src="js/second.js"></script>
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: "Glacial Indifference";
|
||||
@ -64,7 +64,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="./#timeline">Next Hackathon</a> in
|
||||
<p id="banner-text"><a class="navlink" id="timer-link" href="./#schedule-heading"><span id="event-name">loading...</span></a>in
|
||||
<span id="timer">---</span>
|
||||
</p>
|
||||
</div>
|
||||
|
@ -20,7 +20,7 @@
|
||||
<link rel="icon" href="img/icon.ico">
|
||||
|
||||
<!-- JavaScript Refs -->
|
||||
<script defer src="js/licenses.js"></script>
|
||||
<script defer src="js/second.js"></script>
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: "Glacial Indifference";
|
||||
@ -64,7 +64,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="./#timeline">Next Hackathon</a> in
|
||||
<p id="banner-text"><a class="navlink" id="timer-link" href="./#schedule-heading"><span id="event-name">loading...</span></a>in
|
||||
<span id="timer">---</span>
|
||||
</p>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user