Add elements for special events

css/style-main.css

@@ -247,7 +247,6 @@ summary {
 /* HEADER COMPONENT */
 .main-header {
     width: 100%;
-    max-height: 20rem;
     background-color: var(--clr-main-header-bg);
     display: flex;
     flex-direction: column;
@@ -255,6 +254,17 @@ summary {
     text-align: center;
 }
 
+.main-header__top-bar {
+    background-color: var(--clr-navbar-bg);
+    width: 100%;
+    padding: 0.5em 0;
+}
+
+.main-header__img {
+    display: grid;
+    place-content: center;
+}
+
 .main-header img {
     object-fit: scale-down;
     overflow: hidden;
@@ -624,6 +634,16 @@ article, .content-container {
 	);
 }
 
+.flag-progress {
+	background:
+        conic-gradient(at 14% 50%, #0000 221.25deg, #ffffff 222deg 318deg, #0000 318.25deg),
+        conic-gradient(at 23% 50%, #0000 221.25deg, #f5a9b8 222deg 318deg, #0000 318.25deg),
+        conic-gradient(at 32% 50%, #0000 221.25deg, #5bcefa 222deg 318deg, #0000 318.25deg),
+        conic-gradient(at 41% 50%, #0000 221.25deg, #784F17 222deg 318deg, #0000 318.25deg),
+        conic-gradient(at 50% 50%, #0000 221.25deg, black 222deg 318deg, #0000 318.25deg),
+        linear-gradient(#e40303 0 16.66%, #ff8c00 0 33.33%, #ffed00 0 50%, #008026 0 66.66%, #004dff 0 83.33%, #750787 0);
+}
+
 /* FOOTER COMPONENT */
 .main-footer {
     background: var(--clr-main-footer-bg);

js/main-components.js

@@ -1,7 +1,196 @@
 /* ------ MAIN HEADER COMPONENT ------ */
-document.querySelector(".main-header").innerHTML = `
+const header = document.querySelector(".main-header");
+
+header.innerHTML = loadHeader();
+
+function loadHeader() {
+    const headerTopBar = `<div class="main-header__top-bar"></div>`;
+    const headerImg = `
+        <div class="main-header__img">
             <img src="/assets/Leilukins-Hub-website-banner.png" alt="">
-`;
+        </div>
+    `;
+    const todayEvent = getTodayEvent();
+
+    if (todayEvent == "No event") {
+        return headerImg;
+    } else {
+        return headerTopBar + headerImg;
+    };
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    const todayEvent = getTodayEvent();
+    const headerTopBarEl = document.querySelector(".main-header__top-bar");
+    const headerImgEl = document.querySelector(".main-header__img");
+
+    if (todayEvent != "No event") {
+        if (todayEvent == "Leilukin's Birthday" || todayEvent == "Leilukin's Hub Anniversary") {
+            headerTopBarEl.innerHTML = getBlurbHtml(todayEvent);
+        } else {
+            headerImgEl.classList.add(getBanner(todayEvent));
+            headerTopBarEl.innerHTML = getBlurbHtml(todayEvent);
+        }
+    };
+});
+
+function getTodayEvent() {
+	const date = new Date();
+	const month = date.getMonth() + 1;
+	const day = date.getDate();
+		
+	if (month == 3 && day == 1)
+		return "Zero Discrimination Day";
+	else if (month == 3 && day == 31)
+		return "Trans Day of Visibility";
+	else if (month == 4 && day == 6)
+		return "International Asexuality Day";
+	else if (month == 4 && day == 26)
+		return "Lesbian Visibility Day";
+	else if (month == 5 && day == 17)
+		return "IDAHOBIT";          
+	else if (month == 5 && day == 25)
+		return "Pansexual and Panromantic Awareness & Visibility Day";
+	else if (month == 6)
+		return "Pride Month";
+	else if (month == 7 && day == 14)
+		return "Non-Binary People's Day";
+    else if (month == 7 && day == 28)
+		return "Leilukin's Birthday";
+    else if (month == 9 && day == 11)
+		return "Leilukin's Hub Anniversary";
+	else if (month == 9 && day == 23)
+		return "Bi Visibility Day";
+	else if (month == 10 && day == 8)
+		return "International Lesbian Day";
+	else if (month == 10 && day == 11)
+		return "National Coming Out Day";
+	else if (month == 10 && day == 26)
+		return "Intersex Awareness Day";
+	else
+		return "No event";
+}
+
+function getBanner(day) {
+	switch (day) {
+        case "Zero Discrimination Day":
+            return "flag-progress";
+            break;
+        case "Trans Day of Visibility":
+            return "flag-trans";
+            break;
+        case "International Asexuality Day":
+            return "flag-ace";
+            break;
+        case "Lesbian Visibility Day":
+            return "flag-lesbian";
+            break;
+        case "IDAHOBIT":
+            return "flag-progress";
+            break;
+        case "Pansexual and Panromantic Awareness & Visibility Day":
+            return "flag-pan";
+            break;
+        case "Pride Month":
+            return "flag-progress";
+            break;
+        case "Non-Binary People's Day":
+            return "flag-non-binary";
+            break;  
+        case "Bi Visibility Day":
+            return "flag-bi";
+            break;
+        case "International Lesbian Day":
+            return "flag-lesbian";
+            break;
+        case "National Coming Out Day":
+            return "flag-rainbow";
+            break;
+        case "Intersex Awareness Day":
+            return "flag-intersex";
+            break;
+        default:
+            return "";
+	}
+}
+
+function getBlurbHtml(day) {
+	switch (day) {
+        case "Zero Discrimination Day":
+            return `
+                Today is <a href="https://www.unaids.org/en/zero-discrimination-day" target="_blank">Zero Discrimination Day</a>
+            `;
+            break;
+        case "Trans Day of Visibility":
+            return `
+                Today is <a href="https://www.manygendersonevoice.org/tdov.html" target="_blank">Trans Day of Visibility</a>
+            `;
+            break;
+        case "International Asexuality Day":
+            return `
+                Today is <a href="https://internationalasexualityday.org/en" target="_blank">International Asexuality Day</a>
+            `;
+            break;
+        case "Lesbian Visibility Day":
+            return `
+                Today is <a href="https://www.lesbianvisibilityweek.com" target="_blank">Lesbian Visibility Day</a>
+            `;
+            break;
+        case "IDAHOBIT":
+            return `
+                Today is <a href="https://may17.org" target="_blank">International Day Against Homophobia, Biphobia and Transphobia</a></span>
+            `;
+            break;
+        case "Pansexual and Panromantic Awareness & Visibility Day":
+            return `
+                Today is <a href="https://genderedintelligence.co.uk/panvisibilityday" target="_blank">Pansexual and Panromantic Visibility Day</a>
+            `;
+            break;
+        case "Pride Month":
+            return `
+                Happy <a href="https://www.loc.gov/lgbt-pride-month/about/" target="_blank">Pride Month</a>!
+            `;
+            break;
+        case "Non-Binary People's Day":
+            return `
+                Today is <a href="https://www.manygendersonevoice.org/non-binary-peoples-day.html" target="_blank">Non-Binary People's Day</a>
+            `;
+            break;
+        case "Leilukin's Birthday":
+            return `
+                Today is Leilukin's birthday
+            `;
+            break;
+        case "Leilukin's Hub Anniversary":
+            return `
+                Today is the anniversary of the launch of Leilukin's Hub
+            `;
+            break;
+        case "Bi Visibility Day":
+            return `
+                Today is <a href="https://bivisibilityday.com/about" target="_blank">Bi Visibility Day</a>
+            `;
+            break;
+        case "International Lesbian Day":
+            return `
+                Today is <a href="https://www.lgbtiqhealth.org.au/international_lesbian_day2" target="_blank">International Lesbian Day</a>
+            `;
+            break;
+        case "National Coming Out Day":
+            return `
+                Today is <a href="https://www.hrc.org/resources/national-coming-out-day" target="_blank">National Coming Out Day</a>
+            `;
+            break;
+        case "Intersex Awareness Day":
+            return `
+                Today is <a href="https://interactadvocates.org/intersex-awareness-day" target="_blank">Intersex Awareness Day</a>
+            `;
+            break;
+        default:
+            return ``;
+	}
+}
+
 
 
 /* ------ MAIN NAVIGATION BAR COMPONENT ------ */
@@ -21,7 +210,6 @@ document.querySelector(".navbar").innerHTML = `
 `;
 
 // Make the navigation bar sticky
-const header = document.querySelector(".main-header");
 const navbar = document.querySelector(".navbar");
 
 window.addEventListener("scroll", e => {