Added timer labels
This commit is contained in:
parent
e052f0c737
commit
6360b55d74
@ -21,7 +21,7 @@
|
|||||||
|
|
||||||
<!-- JavaScript Refs -->
|
<!-- JavaScript Refs -->
|
||||||
<script src="js/jquery-3.6.0.min.js"></script>
|
<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>
|
<script defer src="js/contact.js"></script>
|
||||||
<style>
|
<style>
|
||||||
@font-face {
|
@font-face {
|
||||||
@ -66,7 +66,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="./#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>
|
<span id="timer">---</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
@ -177,7 +177,7 @@ nav ul li {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
top: 30px;
|
top: 30px;
|
||||||
right: -28%;
|
right: -60%;
|
||||||
padding: 2px 7px;
|
padding: 2px 7px;
|
||||||
width: max-content;
|
width: max-content;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
@ -801,7 +801,6 @@ section {
|
|||||||
padding: 10px;
|
padding: 10px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#timeline-heading {
|
#timeline-heading {
|
||||||
@ -1591,6 +1590,11 @@ section {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Schedule */
|
/* Schedule */
|
||||||
|
|
||||||
|
#schedule-heading {
|
||||||
|
padding-top: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
.schedule-parent {
|
.schedule-parent {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: row wrap;
|
flex-flow: row wrap;
|
||||||
|
@ -302,7 +302,7 @@ nav ul li {
|
|||||||
}
|
}
|
||||||
@media (max-width: 470px) {
|
@media (max-width: 470px) {
|
||||||
#nav-logo {
|
#nav-logo {
|
||||||
content: url(/img/Gilroy-Hacks-Logo-icon-tp.ico);
|
content: url(/img/logo_mini.png);
|
||||||
height: 50px;
|
height: 50px;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
}
|
}
|
||||||
|
@ -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="./"><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>
|
<span id="timer">---</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
@ -221,6 +221,7 @@ document.addEventListener('DOMContentLoaded', function(){
|
|||||||
if (testDate > countDownDate && now < testDate) {
|
if (testDate > countDownDate && now < testDate) {
|
||||||
countDownDate = testDate;
|
countDownDate = testDate;
|
||||||
document.getElementById("event-name").innerHTML = event;
|
document.getElementById("event-name").innerHTML = event;
|
||||||
|
document.styleSheets[0].addRule('#timer:after','content: "'+ events[event] +'";');
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -368,4 +369,4 @@ var options = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
var chart = new ApexCharts(document.querySelector("#chart"), 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">
|
<link rel="icon" href="img/icon.ico">
|
||||||
|
|
||||||
<!-- JavaScript Refs -->
|
<!-- JavaScript Refs -->
|
||||||
<script defer src="js/licenses.js"></script>
|
<script defer src="js/second.js"></script>
|
||||||
<style>
|
<style>
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Glacial Indifference";
|
font-family: "Glacial Indifference";
|
||||||
@ -64,7 +64,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="./#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>
|
<span id="timer">---</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
@ -20,7 +20,7 @@
|
|||||||
<link rel="icon" href="img/icon.ico">
|
<link rel="icon" href="img/icon.ico">
|
||||||
|
|
||||||
<!-- JavaScript Refs -->
|
<!-- JavaScript Refs -->
|
||||||
<script defer src="js/licenses.js"></script>
|
<script defer src="js/second.js"></script>
|
||||||
<style>
|
<style>
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Glacial Indifference";
|
font-family: "Glacial Indifference";
|
||||||
@ -64,7 +64,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="./#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>
|
<span id="timer">---</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user