index.js
import "./sass/index.scss"
import "@fortawesome/fontawesome-free/css/all.css"
import $ from "jquery"
// Hiring message
const hiringMessage = `Hey, you.
You’re finally awake.
You were trying to see the code, right?
Walked right into that hiring message, same as us.
If you’d like to work on hackathon-related projects, check out https://brickhack.io/club!`
console.log(hiringMessage);
// Comment generated via js instead of directly in HTML so the hiring message text is only in one place
const comment = document.createComment("\n" + hiringMessage + "\n");
document.insertBefore(comment, document.firstChild);
// Leadership easter egg
/*$(document).ready(function() {
var randomNum = Math.floor(Math.random() * 50);
console.log(randomNum);
if (randomNum === 7) {
console.log("Lucky Ricky");
var ricky = $(".leader:first").clone();
ricky.appendTo($("#team"));
}
});*/
// Nav highlighting on scroll
import ActiveMenuLink from "active-menu-link";
let options = {
itemTag: "",
scrollOffset: -90, // nav height
scrollDuration: 1000,
ease: "out-quart",
showHash: false,
};
new ActiveMenuLink(".navbar-items", options);
// Navbar functionality
$(document).on("click", "#toggle", function() {
if ($("nav").hasClass("show-nav")) {
$("nav").removeClass("show-nav");
$("#toggle").removeClass("fa-times");
$("#toggle").addClass("fa-bars");
$(".mobile-grayout").removeClass("show-gray");
} else {
$("nav").addClass("show-nav");
$("#toggle").removeClass("fa-bars");
$("#toggle").addClass("fa-times");
$(".mobile-grayout").addClass("show-gray");
}
});
// Closing the navbar when a navigation link is clicked
$(document).on("click", ".link", function() {
$("nav").removeClass("show-nav");
$("#toggle").removeClass("fa-times");
$("#toggle").addClass("fa-bars");
$(".mobile-grayout").removeClass("show-gray");
});
// Closing the navbar when outside of the nav is clicked
$(document).on("click", ".mobile-grayout", function() {
$("nav").removeClass("show-nav");
$("#toggle").removeClass("fa-times");
$("#toggle").addClass("fa-bars");
$(".mobile-grayout").removeClass("show-gray");
});
// FAQ Cards hide/show
let card = document.getElementsByClassName("card");
for (let i = 0; i < card.length; i++) {
let accordion = card[i].getElementsByClassName("accordion-header")[0];
// Click should only work on accordion-header of each card
accordion.addEventListener("click", function() {
card[i].classList.toggle("active");
let panel = card[i].getElementsByClassName("panel")[0];
let fa = this.getElementsByTagName("i")[0];
// Toggle panel and plus/minus on click of header
if ($(card[i]).hasClass("active")) {
$(panel).slideDown(200);
} else {
$(panel).slideUp(200);
}
$(fa).toggleClass("fa-plus");
$(fa).toggleClass("fa-minus");
});
}
/* Schedule JS */
// Making buttons toggle hide/show for different days
// Saturday button
$('#saturday').click(function() {
$('#saturday').addClass('day-active');
$('#sunday').removeClass('day-active');
$('#mar-5-content').show();
$('#mar-6-content').hide();
$('#date-indicator-saturday').show();
$('#date-indicator-sunday').hide();
});
// Sunday button
$('#sunday').click(function() {
$('#sunday').addClass('day-active');
$('#saturday').removeClass('day-active');
$('#mar-6-content').show();
$('#mar-5-content').hide();
$('#date-indicator-sunday').show();
$('#date-indicator-saturday').hide();
});
// Setting the schedule to match the day
let currentDate = new Date().getDate()
// Before/during saturday
if (currentDate <= 5) {
$('#saturday').addClass('day-active');
$('#sunday').removeClass('day-active');
$('#mar-5-content').show();
$('#mar-6-content').hide();
$('#date-indicator-saturday').show();
$('#date-indicator-sunday').hide();
}
// Sunday
else {
$('#sunday').addClass('day-active');
$('#saturday').removeClass('day-active');
$('#mar-6-content').show();
$('#mar-5-content').hide();
$('#date-indicator-sunday').show();
$('#date-indicator-saturday').hide();
}
// Fetching event data from HackEngine
fetch('https://apply.brickhack.io/events.json')
.then(res => res.json())
.then(events => handleEventData(events))
.catch(err => console.log(err));
// Turning HackEngine event data into visual events - BH7 code barely modified
function handleEventData(events) {
let now = new Date()
// needed to handle overlapping events
let timeMarkerAdded = false;
// need to sort events by start/end times instead of IDs
events.sort(compareEvents);
// Looping through each event to handle it
events.forEach(event => {
// Getting strings for times
let startDate = new Date(event.start); // convert ISO 8601 -> Date object
let finishDate = undefined;
let dateString = convertDate(startDate);
if (event.finish) { // finish === null for instantaneous events
finishDate = new Date(event.finish);
let finishString = convertDate(finishDate);
if (dateString.slice(-2) === finishString.slice(-2)) { // hide "am/pm" of first time if both are identical
dateString = dateString.slice(0, -2);
}
dateString += " - " + convertDate(finishDate);
}
// calculate event container classes
let divClasses = 'event';
let liveIndicator = "";
if (finishDate < now) {
divClasses += ' event-complete';
}
else if (startDate < now && now < finishDate) {
divClasses += ' event-live';
liveIndicator = '<p class="live">LIVE!</p>';
}
// adding event to the page
var eventContainer;
// Deciding which day content box it goes inside
switch (startDate.getDate()) {
case 5: eventContainer = $('#mar-5-content'); break;
case 6: eventContainer = $('#mar-6-content'); break;
}
// If it doesn't fall into one of those event days, log the problem and quit trying to add it
if (!eventContainer) {
console.log("Event " + event.title + " date " + startDate + " out of range.");
return; // skip current iteration https://stackoverflow.com/a/31399448/1431900
}
// Building HTML and adding it to page
let html = `<div class="${divClasses}"><p class="time">${dateString}</p><p>${event.title}</p>${liveIndicator}</div>`;
const eventDiv = eventContainer.append(html);
});
}
// Comparing two events to sort them - BH7 code unmodified
function compareEvents(a, b) {
// We can sort by start/end here because the ISO 8061
// timestamps given by the server are lexicographically
// sortable.
if (a.start < b.start) { // if a starts before b...
return -1; // ...then a goes before b
} else if (a.start > b.start) { // if a starts after b...
return 1; // ...then b goes before a
} else {
if (a.end < b.end) { // if a ends before b...
return -1; // ...then a goes before b
} else if (a.end > b.end) { // if a ends after b...
return 1; // ...then b goes before a
} else {
return 0;
}
}
}
// Converting dates to something more user friendly - BH7 code unmodified
function convertDate(date) {
let output = '';
// hour
if (date.getHours() > 12) {
output = String(date.getHours() - 12);
} else {
output = String(date.getHours());
}
// minute
if (date.getMinutes() !== 0) {
output += ':' + String(date.getMinutes()).padStart(2, '0');
}
// AM/PM
if (date.getHours() >= 12) {
output += 'pm';
} else {
output += 'am';
}
return output;
}