Reformated JS

This commit is contained in:
James Dinh 2022-07-17 22:55:34 -07:00
parent 0668f582be
commit 99f7c5d393
13 changed files with 386 additions and 267 deletions

View File

@ -19,7 +19,10 @@
<link href="css/scroll_nav.css" rel="stylesheet" type="text/css" media="all"> <link href="css/scroll_nav.css" rel="stylesheet" type="text/css" media="all">
<link rel="icon" href="img/Gilroy-Hacks-Logo-icon-tp.ico"> <link rel="icon" href="img/Gilroy-Hacks-Logo-icon-tp.ico">
<!-- 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/contact.js"></script>
<style> <style>
@font-face { @font-face {
font-family: "Glacial Indifference"; font-family: "Glacial Indifference";
@ -179,10 +182,5 @@
</article> </article>
</div> </div>
</footer> </footer>
<!-- JavaScript Refs -->
<script src="js/scroll_nav.js"></script>
<script src="js/scroll_element.js"></script>
<script src="js/timer.js"></script>
<script src="js/form.js"></script>
</body> </body>
</html> </html>

View File

@ -675,6 +675,10 @@ section {
margin: auto; margin: auto;
} }
.desc-title {
margin-top: 15px;
}
.list { .list {
padding-left: 20px; padding-left: 20px;
} }
@ -1299,13 +1303,14 @@ section {
} }
#gavilan-college-logo { #gavilan-college-logo {
height: auto; height: 102px;
width: 352px; width: 352px;
} }
#gear-club-logo { #gear-club-logo {
height: auto; height: 60px;
width: 352px; width: 352px;
margin-top: 50px !important;
} }
#map-article { #map-article {
@ -1586,7 +1591,7 @@ section {
display: grid; display: grid;
margin: 50px auto 0; margin: 50px auto 0;
width: 80%; width: 80%;
height: 280px; height: auto;
justify-content: center; justify-content: center;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
} }
@ -1632,8 +1637,9 @@ section {
position: absolute; position: absolute;
color: rgb(167, 146, 234); color: rgb(167, 146, 234);
font-size: 25px; font-size: 25px;
margin-bottom: 67px; margin-bottom: 177px;
line-height: 25px; line-height: 25px;
z-index: 1;
} }
.prize-title { .prize-title {
@ -1644,10 +1650,12 @@ section {
.prize-content { .prize-content {
color:rgb(129, 218, 126); color:rgb(129, 218, 126);
font-size: 20px; font-size: 20px;
transform: rotate3d(0, 1, 0, 360deg);
transition: ease 0.5s;
} }
.prize-subtitle { .prize-subtitle {
margin-bottom: 10px; margin: 10px 0;
} }
#prize-column { #prize-column {
@ -1707,6 +1715,10 @@ section {
color: #ffde59; color: #ffde59;
} }
.prize-img {
height: 100px;
}
#prize-box { #prize-box {
border-radius: 10px; border-radius: 10px;
border: 1px solid white; border: 1px solid white;
@ -1882,6 +1894,10 @@ section {
cursor: pointer; cursor: pointer;
} }
.bottom-text {
margin: 10px 5px;
}
.link { .link {
color:rgb(252, 188, 93); color:rgb(252, 188, 93);
text-decoration: none; text-decoration: none;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 275 KiB

After

Width:  |  Height:  |  Size: 64 KiB

View File

@ -25,7 +25,10 @@
<meta name="description" content="The official website for the Gilroy Hacks Hackathon. Strengthen your skills and collaborate with others to create something useful."> <meta name="description" content="The official website for the Gilroy Hacks Hackathon. Strengthen your skills and collaborate with others to create something useful.">
<meta name="keywords" content="Gilroy Hacks, GilroyHacks, Gilroy, hackathon, Bay Area, GECA, Dr. TJ Owens Gilroy Early College Academy"> <meta name="keywords" content="Gilroy Hacks, GilroyHacks, Gilroy, hackathon, Bay Area, GECA, Dr. TJ Owens Gilroy Early College Academy">
<script src="js/leaflet.js"></script> <!-- JavaScript Refs -->
<script defer src="js/leaflet.js"></script>
<script defer src="js/map.js"></script>
<script defer src="js/general.js"></script>
<script defer data-domain="gilroyhacks.com" src="https://plausible.gilroyhacks.com/js/plausible.js"></script> <script defer data-domain="gilroyhacks.com" src="https://plausible.gilroyhacks.com/js/plausible.js"></script>
<style> <style>
@font-face { @font-face {
@ -117,17 +120,25 @@
<hr class="line"> <hr class="line">
<div id="event-container"> <div id="event-container">
<article id="event-description"> <article id="event-description">
<h2 id="description-heading">Our Mission Statement</h2> <h2 id="description-heading">Our Mission & Important Info</h2>
<div id="event-main-box"> <div id="event-main-box">
<div id="description-content">Gilroy Hacks is a student-led organization focused on promoting community engagement and improving STEM exposure for local middle/high school students.</div> <div id="description-content">Gilroy Hacks is a student-led organization focused on promoting community engagement and improving STEM exposure for local middle/high school students.</div>
<hr class="line"> <hr class="line">
<ul class="list"> <ul class="list">
<li>Even if you're not an expert at coding, this hackathon offers an opportunity for you to strengthen your skills and collaborate with others to create something useful. Below are important dates to keep in mind: <li>Even if you're not an expert at coding, this hackathon offers an opportunity for you to strengthen your skills and collaborate with others to create something useful.</li>
<h3 class="desc-title">Main Events</h3>
<ul style="margin-left: 25px"> <ul style="margin-left: 25px">
<li><span class="emphasis-text">Aug 11</span> -> Signup Period Ends</li> <li><span class="emphasis-text">Aug 12</span> -> Opening Ceremony</li>
<li><span class="emphasis-text">Aug 12-14</span> -> Summer 2022 Hackathon</li> <li><span class="emphasis-text">Aug 13</span> -> Web Dev + Python Workshops</li>
<li><span class="emphasis-text">Aug 14</span> -> Project Presentations</li>
</ul> </ul>
</li> </li>
<h3 class="desc-title">Details</h3>
<ul style="margin-left: 25px">
<li>Signups are limited to <u>middle and high school students only</u></li>
<li>Workshops are <u>fully open to the public</u> (as space allows)</li>
<li>All events will be held <u>in-person</u> at the Gilroy Library</li>
</ul>
</ul> </ul>
</div> </div>
<!-- Timeline src: https://codepen.io/cjl750/pen/MXvYmg --> <!-- Timeline src: https://codepen.io/cjl750/pen/MXvYmg -->
@ -338,9 +349,9 @@
<a href="https://www.gavilan.edu/" target="_blank"> <a href="https://www.gavilan.edu/" target="_blank">
<img id="gavilan-college-logo" src="img/gavilan_college.png" alt="Gavilan College logo"> <img id="gavilan-college-logo" src="img/gavilan_college.png" alt="Gavilan College logo">
</a> </a>
<!-- <a href="https://www.gavengineering.club/" target="_blank"> <a href="https://www.gavengineering.club/" target="_blank">
<img id="gear-club-logo" src="img/gear_logo.png" alt="GEAR Club logo"> <img id="gear-club-logo" src="img/gear_logo.png" alt="GEAR Club logo">
</a> --> </a>
</div> </div>
</article> </article>
</div> </div>
@ -446,6 +457,7 @@
</div> </div>
</div> </div>
</div> </div>
<p class="bottom-text">*All events will be held in-person at the Gilroy Library</p>
</article> </article>
<article id="map-div"> <article id="map-div">
<h2 class="map-title">Location</h2> <h2 class="map-title">Location</h2>
@ -575,10 +587,11 @@
<div class="podium-description"> <div class="podium-description">
<div class="prize-desc" id="second-place"> <div class="prize-desc" id="second-place">
<div class="prize-text"> <div class="prize-text">
<span class="prize-title">2nd</span><br> <span class="prize-title">2nd</span>
<span class="prize-content">$213</span> <div class="prize-content">$213</div>
</div> </div>
<img class="prize-laurel" src="img/silver-laurel.png" loading="lazy" alt="silver laurel"> <img class="prize-laurel" src="img/silver-laurel.png" loading="lazy" alt="silver laurel">
<img class="prize-img" src="img/NEHEME_drone.png" loading="lazy" alt="NEHEME Drone">
<div class="prize-subtitle">NEHEME NH525 Foldable Drone (x4)</div> <div class="prize-subtitle">NEHEME NH525 Foldable Drone (x4)</div>
</div> </div>
<div class="podium-edge"></div> <div class="podium-edge"></div>
@ -593,6 +606,7 @@
<span class="prize-content">$362</span> <span class="prize-content">$362</span>
</div> </div>
<img class="prize-laurel" src="img/gold-laurel.png" loading="lazy" alt="gold laurel"> <img class="prize-laurel" src="img/gold-laurel.png" loading="lazy" alt="gold laurel">
<img class="prize-img" src="img/pixoo_sling_bag.png" loading="lazy" alt="NEHEME Drone">
<div class="prize-subtitle">Divoom LED Display Sling Bag (x4)</div> <div class="prize-subtitle">Divoom LED Display Sling Bag (x4)</div>
</div> </div>
<div class="podium-edge"></div> <div class="podium-edge"></div>
@ -611,6 +625,7 @@
<span class="prize-content">$100</span> <span class="prize-content">$100</span>
</div> </div>
<img class="prize-laurel" src="img/bronze-laurel.png" loading="lazy" alt="bronze laurel"> <img class="prize-laurel" src="img/bronze-laurel.png" loading="lazy" alt="bronze laurel">
<img class="prize-img" src="img/Kunodi_speaker.png" loading="lazy" alt="NEHEME Drone">
<div class="prize-subtitle">Kunodi Bluetooth 5.0 Portable Speaker (x4)</div> <div class="prize-subtitle">Kunodi Bluetooth 5.0 Portable Speaker (x4)</div>
</div> </div>
<div class="podium-edge"></div> <div class="podium-edge"></div>
@ -623,7 +638,7 @@
<ul id="prize-list"> <ul id="prize-list">
<li><span class="emphasis-text">1st Place</span>: Divoom LED Display Sling Bag (x4)</li> <li><span class="emphasis-text">1st Place</span>: Divoom LED Display Sling Bag (x4)</li>
<li><span class="emphasis-text">2nd Place</span>: NEHEME NH525 Foldable Drone (x4)</li> <li><span class="emphasis-text">2nd Place</span>: NEHEME NH525 Foldable Drone (x4)</li>
<li><span class="emphasis-text">3rd Place</span>: Kunodi Bluetooth 5.0 Wireless Portable Speaker (x4)</li> <li><span class="emphasis-text">3rd Place</span>: Kunodi Bluetooth 5.0 Portable Speaker (x4)</li>
</ul> </ul>
<br> <br>
<h4><u>Terms & Conditions</u></h4> <h4><u>Terms & Conditions</u></h4>
@ -685,7 +700,7 @@
<div class="team-description"> <div class="team-description">
<h4 class="person-name">James Dinh</h4> <h4 class="person-name">James Dinh</h4>
<h5 class="person-subtitle">Lead Website Designer</h5> <h5 class="person-subtitle">Lead Website Designer</h5>
<h5 class="person-contact"><span class="discord-text">Discord</span>: wellfedbison<span class="discord-tag">#0607</span><br><a class="link" target="_blank" href="mailto:jamesdinh77@protonmail.com" title="Email">jamesdinh77@protonmail.com</a></h5> <h5 class="person-contact"><span class="discord-text">Discord</span>: wellfedbison<span class="discord-tag">#0607</span><br><a class="link email-replace" target="_blank" href="mailto:jamesdinh77@protonmail.com" title="Email">jamesdinh77@protonmail.com</a></h5>
</div> </div>
</div> </div>
<div class="team-entry"> <div class="team-entry">
@ -754,12 +769,5 @@
</article> </article>
</div> </div>
</footer> </footer>
<!-- JavaScript Refs -->
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/scroll_nav.js"></script>
<script src="js/scroll_element.js"></script>
<script src="js/timer.js"></script>
<script src="js/data_checkbox.js"></script>
<script src="js/map.js"></script>
</body> </body>
</html> </html>

View File

@ -1,54 +0,0 @@
// Gilroy Hacks Website Source Code -> JS (https://gilroyhacks.com)
var i;
var checkboxes = document.querySelectorAll('#signup-container input[type=checkbox]');
var verify = true;
function save() {
for (i = 0; i < checkboxes.length; i++) {
localStorage.setItem(checkboxes[i].value, checkboxes[i].checked);
}
}
window.onload = function() {
load();
};
function load() {
for (i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = localStorage.getItem(checkboxes[i].value) === 'true' ? true:false;
}
}
function check(id) {
document.getElementById(id).checked = true;
}
function uncheck(id) {
document.getElementById(id).checked = false;
}
function notification(id) {
if (localStorage.getItem(checkboxes[id].value) != true) { verify = false; }
if (verify) { document.getElementById('notification').style.visibility = visible; }
}
// function btnToggle() {
// if (document.getElementById('#check').checked) {
// document.getElementById('#check').checked = false;
// }
// else {
// document.getElementById('#check').checked = true;
// }
// }
// document.getElementById('#check').addEventListener('click', function (event) {
// if (!document.getElementById('check').checked) {
// event.stopPropagation();
// }
// });
// window.onclick = function(event) {
// if (!event.target.matches('check')) {
// if (document.getElementById('check').checked) {
// document.getElementById('check').checked = false;
// }
// }
// }
// document.getElementById("navList").addEventListener('click', function (event) {
// if (document.getElementById('check').checked) {
// event.stopPropagation();
// }});

225
js/general.js Normal file
View File

@ -0,0 +1,225 @@
// Gilroy Hacks Website Source Code -> JS (https://gilroyhacks.com)
"use strict";
// document is loaded and DOM is ready
document.addEventListener('DOMContentLoaded', function(){
document.querySelectorAll('a.email-replace').forEach(elem => {
elem.href = "mailto:jamesdinh77" + "@" + "protonmail.com";
elem.target = "_blank";
});
// Checkbox Local Storage
var i;
var checkboxes = document.querySelectorAll('#signup-container input[type=checkbox]');
var verify = true;
function save() {
for (i = 0; i < checkboxes.length; i++) {
localStorage.setItem(checkboxes[i].value, checkboxes[i].checked);
}
}
window.onload = function() {
load();
};
function load() {
for (i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = localStorage.getItem(checkboxes[i].value) === 'true' ? true:false;
}
}
function check(id) {
document.getElementById(id).checked = true;
}
function uncheck(id) {
document.getElementById(id).checked = false;
}
function notification(id) {
if (localStorage.getItem(checkboxes[id].value) != true) { verify = false; }
if (verify) { document.getElementById('notification').style.visibility = visible; }
}
// function btnToggle() {
// if (document.getElementById('#check').checked) {
// document.getElementById('#check').checked = false;
// }
// else {
// document.getElementById('#check').checked = true;
// }
// }
// document.getElementById('#check').addEventListener('click', function (event) {
// if (!document.getElementById('check').checked) {
// event.stopPropagation();
// }
// });
// window.onclick = function(event) {
// if (!event.target.matches('check')) {
// if (document.getElementById('check').checked) {
// document.getElementById('check').checked = false;
// }
// }
// }
// document.getElementById("navList").addEventListener('click', function (event) {
// if (document.getElementById('check').checked) {
// event.stopPropagation();
// }});
// Scroll Element
// Creating an observer when the user views that element
const observer = new IntersectionObserver(entries => {
// Loop over the entries
entries.forEach(entry => {
// If the element is visible
if (entry.isIntersecting) {
// Add the animation class
entry.target.classList.add('slide-animation');
}
});
});
const observer_prize_2 = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('slide-animation-prize-2');
}
});
});
const observer_prize_1 = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('slide-animation-prize-1');
}
});
});
const observer_prize_3 = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('slide-animation-prize-3');
}
});
});
const observer_team_img = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('slide-animation-card-img');
}
});
});
const observer_team_desc = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('slide-animation-card-desc');
}
});
});
const entries = document.querySelectorAll('.team-picture');
entries.forEach(entry => {
observer_team_img.observe(entry);
});
const entries_desc = document.querySelectorAll('.team-description');
entries_desc.forEach(entry => {
observer_team_desc.observe(entry);
});
const prize_entries = document.querySelectorAll('.prize-column');
prize_entries.forEach(entry => {
observer.observe(entry);
});
const prize_entries_edge = document.querySelectorAll('.podium-edge');
prize_entries_edge.forEach(entry => {
observer.observe(entry);
});
// Adding the class animations to these elements
let elements_id = ['#description-heading', '#event-main-box', '#timeline', '#signup-title', '#steps-card', '#sponsor-title', '#sponsor-container', '#map-article', '#rules-description', '#guidelines', '#code-of-conduct', '#photo-release-container', '#second-podium', '#first-podium', '#third-podium', '#prize-box', '#administration', '#logistics', '#outreach', '#tech', '#marketing'];
elements_id.forEach(entry => {
var thing = document.querySelector(entry)
observer.observe(document.querySelector(entry));
});
observer_prize_2.observe(document.querySelector('#second-place'));
observer_prize_1.observe(document.querySelector('#first-place'));
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
window.onscroll = () => {scrollNavbar()};
var scrollNavbar = () => {
// Target elements
const navBar = document.getElementById("navBar");
const links = document.querySelectorAll("#navBar a");
if (document.documentElement.scrollTop > 50) {
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');
}
}
}
// 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 12, 2022 16: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 = "LIVE";
}
// Display the result in the element with id="timer"
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);
});
// page is fully loaded, including all frames, objects and images
window.addEventListener("load", function() {
});
// General functions

69
js/licenses.js Normal file
View File

@ -0,0 +1,69 @@
// 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 > 50) {
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');
}
}
}
// 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 12, 2022 16: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 = "LIVE";
}
// Display the result in the element with id="timer"
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);

View File

@ -1,74 +0,0 @@
// Gilroy Hacks Website Source Code -> JS (https://gilroyhacks.com)
// Creating an observer when the user views that element
const observer = new IntersectionObserver(entries => {
// Loop over the entries
entries.forEach(entry => {
// If the element is visible
if (entry.isIntersecting) {
// Add the animation class
entry.target.classList.add('slide-animation');
}
});
});
const observer_prize_2 = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('slide-animation-prize-2');
}
});
});
const observer_prize_1 = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('slide-animation-prize-1');
}
});
});
const observer_prize_3 = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('slide-animation-prize-3');
}
});
});
const observer_team_img = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('slide-animation-card-img');
}
});
});
const observer_team_desc = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('slide-animation-card-desc');
}
});
});
const entries = document.querySelectorAll('.team-picture');
entries.forEach(entry => {
observer_team_img.observe(entry);
});
const entries_desc = document.querySelectorAll('.team-description');
entries_desc.forEach(entry => {
observer_team_desc.observe(entry);
});
// Adding the class animations to these elements
let elements_id = ['#description-heading', '#event-main-box', '#timeline', '#signup-title', '#steps-card', '#sponsor-title', '#sponsor-container', '#map-article', '#rules-description', '#guidelines', '#code-of-conduct', '#photo-release-container', '#second-column', '#first-column', '#third-column', '#prize-box', '#administration', '#logistics', '#outreach', '#tech', '#marketing'];
elements_id.forEach(entry => {
observer.observe(document.querySelector(entry));
});
observer_prize_2.observe(document.querySelector('#second-place'));
observer_prize_1.observe(document.querySelector('#first-place'));
observer_prize_3.observe(document.querySelector('#third-place'));

View File

@ -1,31 +0,0 @@
// Gilroy Hacks Website Source Code -> JS (https://gilroyhacks.com)
// Toggle the .pa-fixed-header class when the user
// scroll 100px
window.onscroll = () => {scrollNavbar()};
scrollNavbar = () => {
// Target elements
const navBar = document.getElementById("navBar");
const links = document.querySelectorAll("#navBar a");
if (document.documentElement.scrollTop > 50) {
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');
}
}
}

View File

@ -1,35 +0,0 @@
// SRC: W3Schools https://www.w3schools.com/howto/howto_js_countdown.asp
// Set the date we're counting down to
var countDownDate = new Date("Aug 12, 2022 16: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 = "LIVE";
}
// Display the result in the element with id="timer"
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);

View File

@ -19,6 +19,8 @@
<link href="css/scroll_nav.css" rel="stylesheet" type="text/css" media="all"> <link href="css/scroll_nav.css" rel="stylesheet" type="text/css" media="all">
<link rel="icon" href="img/Gilroy-Hacks-Logo-icon-tp.ico"> <link rel="icon" href="img/Gilroy-Hacks-Logo-icon-tp.ico">
<!-- JavaScript Refs -->
<script defer src="js/licenses.js"></script>
<style> <style>
@font-face { @font-face {
font-family: "Glacial Indifference"; font-family: "Glacial Indifference";
@ -294,10 +296,5 @@
</article> </article>
</div> </div>
</footer> </footer>
<!-- JavaScript Refs -->
<script src="js/scroll_nav.js"></script>
<script src="js/scroll_element.js"></script>
<script src="js/timer.js"></script>
<script src="js/data_checkbox.js"></script>
</body> </body>
</html> </html>