diff --git a/shrines/asummersend/css/style-asummersend.css b/shrines/asummersend/css/style-asummersend.css
index 269cf7a8..52538190 100644
--- a/shrines/asummersend/css/style-asummersend.css
+++ b/shrines/asummersend/css/style-asummersend.css
@@ -30,11 +30,8 @@
--clr-main-footer-bg: #181818;
}
-.main-header {
- max-height: 20rem;
-}
-
.main-header img {
object-fit: cover;
object-position: center;
+ max-height: 20rem;
}
\ No newline at end of file
diff --git a/shrines/asummersend/js/ase-components.js b/shrines/asummersend/js/ase-components.js
index 867a0c59..e9565a5d 100644
--- a/shrines/asummersend/js/ase-components.js
+++ b/shrines/asummersend/js/ase-components.js
@@ -1,7 +1,70 @@
/* ------ A SUMMER'S END SHRINE HEADER COMPONENT ------ */
-document.querySelector(".main-header").innerHTML = `
-
-`;
+const header = document.querySelector(".main-header");
+
+header.innerHTML = loadHeader();
+
+function loadHeader() {
+ const headerTopBar = `
`;
+ const headerImg = `
`;
+ const todayEvent = getTodayEvent();
+
+ if (todayEvent == "No event") {
+ return headerImg;
+ } else {
+ return headerTopBar + headerImg;
+ };
+}
+
+const todayEvent = getTodayEvent();
+const headerTopBarEl = document.querySelector(".main-header__top-bar");
+
+if (todayEvent != "No event") {
+ headerTopBarEl.innerHTML = getBlurbHtml(todayEvent);
+};
+
+function getTodayEvent() {
+ const date = new Date();
+ const month = date.getMonth() + 1;
+ const day = date.getDate();
+
+ if (month == 2 && day == 16)
+ return "Michelle's Birthday";
+ else if (month == 4 && day == 23)
+ return "ASE Anniversary";
+ else if (month == 8 && day == 9)
+ return "Cecelia's Birthday";
+ else if (month == 12 && day == 28)
+ return "Sam's Birthday";
+ else
+ return "No event";
+}
+
+function getBlurbHtml(day) {
+ switch (day) {
+ case "Michelle's Birthday":
+ return `
+ Today is Michelle Cheung's birthday. Happy Birthday Michelle!
+ `;
+ break;
+ case "ASE Anniversary":
+ return `
+ Today is the anniversary of the release of A Summer’s End — Hong Kong 1986!
+ `;
+ break;
+ case "Cecelia's Birthday":
+ return `
+ Today is Cecelia Cortes' birthday. Happy Birthday Cecelia!
+ `;
+ break;
+ case "Sam's Birthday":
+ return `
+ Today is Sam Wong's birthday. Happy Birthday Sam!
+ `;
+ break;
+ default:
+ return ``;
+ }
+}
/* ------ A SUMMER'S END SHRINE NAVIGATION BAR COMPONENT ------ */
@@ -16,7 +79,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 => {