-
${event.title}
-
${formattedDate}
-
${event.time || 'Time not specified'}
-
${event.location || 'Location not specified'}
-
${event.description || 'No description available'}
-
${buttonText}
+ // Check if the date is valid
+ if (isNaN(eventDateObj.getTime())) {
+ throw new Error("Invalid date");
+ }
+
+ // Get the components for the desired format
+ const weekday = new Intl.DateTimeFormat("en-US", {
+ weekday: "long",
+ }).format(eventDateObj);
+ const dayNum = eventDateObj.getUTCDate();
+ const monthName = new Intl.DateTimeFormat("en-US", {
+ month: "long",
+ }).format(eventDateObj);
+ const yearNum = eventDateObj.getUTCFullYear();
+
+ // Combine components into the desired format
+ formattedDate = `${dayNum} ${monthName} ${yearNum}, ${weekday}`;
+ } catch (error) {
+ console.error(`Error formatting date for event "${event.title}":`, error);
+ formattedDate = "Date not available";
+ }
+
+ return `
+
+
+
+
${event.title}
+
${formattedDate}
+
${
+ event.time || "Time not specified"
+ }
+
${event.location || "Location not specified"}
+
${event.description || "No description available"}
+
${buttonText}
`;
@@ -76,127 +98,149 @@ function createEventCard(event, isPastEvent = false) {
// Function to populate event grids
function populateEventGrids(events) {
- // Filter past and upcoming events using isEventPast function
- const upcomingEvents = events.filter(event => !isEventPast(event.date));
- const pastEvents = events.filter(event => isEventPast(event.date));
-
-
- // Sort upcoming events by date in ascending order
- upcomingEvents.sort((a, b) => {
- const dateA = new Date(a.date.split('-').reverse().join('-'));
- const dateB = new Date(b.date.split('-').reverse().join('-'));
- return dateA - dateB;
- });
-
- // Sort past events by date in descending order
- pastEvents.sort((a, b) => {
- const dateA = new Date(a.date.split('-').reverse().join('-'));
- const dateB = new Date(b.date.split('-').reverse().join('-'));
- return dateB - dateA;
- });
-
- // Populate upcoming events grid
- const upcomingEventGrid = document.getElementById('upcoming-events');
- if (upcomingEventGrid) {
- upcomingEventGrid.innerHTML = upcomingEvents.map(event => createEventCard(event)).join('');
- } else {
- console.log('Upcoming events grid not found');
- }
-
- // Populate past events grid
- const pastEventGrid = document.getElementById('past-events');
- if (pastEventGrid) {
- pastEventGrid.innerHTML = pastEvents.map(event => createEventCard(event, true)).join('');
- } else {
- console.log('Past events grid not found');
- }
- console.log(`Populated ${upcomingEvents.length} upcoming events and ${pastEvents.length} past events.`);
+ // Filter past and upcoming events using isEventPast function
+ const upcomingEvents = events.filter((event) => !isEventPast(event.date));
+ const pastEvents = events.filter((event) => isEventPast(event.date));
+
+ // Sort upcoming events by date in ascending order
+ upcomingEvents.sort((a, b) => {
+ const dateA = new Date(a.date.split("-").reverse().join("-"));
+ const dateB = new Date(b.date.split("-").reverse().join("-"));
+ return dateA - dateB;
+ });
+
+ // Sort past events by date in descending order
+ pastEvents.sort((a, b) => {
+ const dateA = new Date(a.date.split("-").reverse().join("-"));
+ const dateB = new Date(b.date.split("-").reverse().join("-"));
+ return dateB - dateA;
+ });
+
+ // Populate upcoming events grid
+ const upcomingEventGrid = document.getElementById("upcoming-events");
+ if (upcomingEventGrid) {
+ upcomingEventGrid.innerHTML = upcomingEvents
+ .map((event) => createEventCard(event))
+ .join("");
+ } else {
+ console.log("Upcoming events grid not found");
+ }
+
+ // Populate past events grid
+ const pastEventGrid = document.getElementById("past-events");
+ if (pastEventGrid) {
+ pastEventGrid.innerHTML = pastEvents
+ .map((event) => createEventCard(event, true))
+ .join("");
+ } else {
+ console.log("Past events grid not found");
+ }
+ console.log(
+ `Populated ${upcomingEvents.length} upcoming events and ${pastEvents.length} past events.`
+ );
}
// Fetch and display events on DOM load
-document.addEventListener('DOMContentLoaded', fetchEventData);
+document.addEventListener("DOMContentLoaded", fetchEventData);
// Smooth scrolling for navigation links
-document.querySelectorAll('a[href^="#"]').forEach(anchor => {
- anchor.addEventListener('click', function (e) {
- e.preventDefault();
- document.querySelector(this.getAttribute('href')).scrollIntoView({
- behavior: 'smooth'
- });
+document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
+ anchor.addEventListener("click", function (e) {
+ e.preventDefault();
+ document.querySelector(this.getAttribute("href")).scrollIntoView({
+ behavior: "smooth",
});
+ });
});
// Navbar background change on scroll
-window.addEventListener('scroll', () => {
- const navbar = document.querySelector('.navbar');
- if (window.scrollY > 50) {
- navbar.style.backgroundColor = 'rgba(255, 255, 255, 0.95)';
- } else {
- navbar.style.backgroundColor = 'rgba(255, 255, 255, 0.9)';
- }
+window.addEventListener("scroll", () => {
+ const navbar = document.querySelector(".navbar");
+ if (window.scrollY > 50) {
+ navbar.style.backgroundColor = "rgba(255, 255, 255, 0.95)";
+ } else {
+ navbar.style.backgroundColor = "rgba(255, 255, 255, 0.9)";
+ }
});
// Theme switcher functionality
-document.addEventListener('DOMContentLoaded', function() {
- const themeToggle = document.getElementById('theme-toggle');
- const themeOptions = document.querySelector('.theme-options');
- const themeButtons = document.querySelectorAll('.theme-btn');
- const logoImage = document.querySelector('.logo'); // Logo image element
- const savedTheme = localStorage.getItem('theme');
-
- const themeAssets = {
- blue: { logo: '/assets/images/logos/logo1.png', favicon: '/assets/images/favicons/favicon1.png' },
- red: { logo: '/assets/images/logos/logo2.png', favicon: '/assets/images/favicons/favicon2.png' },
- yellow: { logo: '/assets/images/logos/logo3.png', favicon: '/assets/images/favicons/favicon3.png' },
- green: { logo: '/assets/images/logos/logo4.png', favicon: '/assets/images/favicons/favicon4.png' },
- purple: { logo: '/assets/images/logos/logo5.png', favicon: '/assets/images/favicons/favicon5.png' },
- };
-
- const updateFavicon = (faviconPath) => {
- let faviconElement = document.querySelector("link[rel='icon']");
- if (!faviconElement) {
- faviconElement = document.createElement('link');
- faviconElement.rel = 'icon';
- faviconElement.type = 'image/x-icon';
- document.head.appendChild(faviconElement);
- }
- faviconElement.href = faviconPath;
- };
-
- // Set initial theme, logo, and favicon based on localStorage
- if (savedTheme && themeAssets[savedTheme]) {
- const { logo, favicon } = themeAssets[savedTheme];
- document.documentElement.setAttribute('data-theme', savedTheme);
+document.addEventListener("DOMContentLoaded", function () {
+ const themeToggle = document.getElementById("theme-toggle");
+ const themeOptions = document.querySelector(".theme-options");
+ const themeButtons = document.querySelectorAll(".theme-btn");
+ const logoImage = document.querySelector(".logo"); // Logo image element
+ const savedTheme = localStorage.getItem("theme");
+
+ const themeAssets = {
+ blue: {
+ logo: "/assets/images/logos/logo1.png",
+ favicon: "/assets/images/favicons/favicon1.png",
+ },
+ red: {
+ logo: "/assets/images/logos/logo2.png",
+ favicon: "/assets/images/favicons/favicon2.png",
+ },
+ yellow: {
+ logo: "/assets/images/logos/logo3.png",
+ favicon: "/assets/images/favicons/favicon3.png",
+ },
+ green: {
+ logo: "/assets/images/logos/logo4.png",
+ favicon: "/assets/images/favicons/favicon4.png",
+ },
+ purple: {
+ logo: "/assets/images/logos/logo5.png",
+ favicon: "/assets/images/favicons/favicon5.png",
+ },
+ pink: {
+ logo: "/assets/images/logos/logo7.png",
+ favicon: "/assets/images/favicons/favicon7.png",
+ },
+ orange: {
+ logo: "/assets/images/logos/logo8.png",
+ favicon: "/assets/images/favicons/favicon8.png",
+ },
+ teal: {
+ logo: "/assets/images/logos/logo9.png",
+ favicon: "/assets/images/favicons/favicon9.png",
+ },
+ };
+
+ const updateFavicon = (faviconPath) => {
+ let faviconElement = document.querySelector("link[rel='icon']");
+ if (!faviconElement) {
+ faviconElement = document.createElement("link");
+ faviconElement.rel = "icon";
+ faviconElement.type = "image/x-icon";
+ document.head.appendChild(faviconElement);
+ }
+ faviconElement.href = faviconPath;
+ };
+
+ // Set initial theme, logo, and favicon based on localStorage
+ if (savedTheme && themeAssets[savedTheme]) {
+ const { logo, favicon } = themeAssets[savedTheme];
+ document.documentElement.setAttribute("data-theme", savedTheme);
+ logoImage.src = logo;
+ updateFavicon(favicon);
+ }
+
+ themeToggle.addEventListener("click", function () {
+ themeOptions.classList.toggle("active");
+ const isExpanded = this.getAttribute("aria-expanded") === "true";
+ this.setAttribute("aria-expanded", !isExpanded);
+ });
+
+ themeButtons.forEach((button) => {
+ button.addEventListener("click", function () {
+ const color = this.getAttribute("data-color");
+ if (themeAssets[color]) {
+ const { logo, favicon } = themeAssets[color];
+ document.documentElement.setAttribute("data-theme", color);
+ localStorage.setItem("theme", color);
logoImage.src = logo;
updateFavicon(favicon);
- }
-
- themeToggle.addEventListener('click', function() {
- themeOptions.classList.toggle('active');
- const isExpanded = this.getAttribute('aria-expanded') === 'true';
- this.setAttribute('aria-expanded', !isExpanded);
- });
-
- themeButtons.forEach(button => {
- button.addEventListener('click', function() {
- const color = this.getAttribute('data-color');
- if (themeAssets[color]) {
- const { logo, favicon } = themeAssets[color];
- document.documentElement.setAttribute('data-theme', color);
- localStorage.setItem('theme', color);
- logoImage.src = logo;
- updateFavicon(favicon);
- themeOptions.classList.remove('active');
- themeToggle.setAttribute('aria-expanded', 'false');
- }
- });
- });
-
- // Close theme options when clicking outside
- document.addEventListener('click', function(event) {
- if (!themeToggle.contains(event.target) && !themeOptions.contains(event.target)) {
- themeOptions.classList.remove('active');
- themeToggle.setAttribute('aria-expanded', 'false');
- }
+ }
});
+ });
});
diff --git a/style.css b/style.css
index 7807dc4..d23e1f9 100644
--- a/style.css
+++ b/style.css
@@ -5,8 +5,45 @@
--background-color: #f4f4f4;
--text-color: #333;
--light-text-color: #666;
+ --pink-color: #ff69b4;
+ --orange-color: #ffa500;
+ --teal-color: #008080;
}
+
+[data-theme="pink"] {
+ --primary-color: var(--pink-color);
+ --secondary-color: #ff1493;
+ --accent-color: #ff69b4;
+}
+
+
+[data-theme="orange"] {
+ --primary-color: var(--orange-color);
+ --secondary-color: #ff8c00;
+ --accent-color: #ffa500;
+}
+
+
+[data-theme="teal"] {
+ --primary-color: var(--teal-color);
+ --secondary-color: #20b2aa;
+ --accent-color: #008080;
+}
+
+.theme-btn[data-color="pink"] {
+ background-color: #ff69b4;
+}
+
+.theme-btn[data-color="orange"] {
+ background-color: #ffa500;
+}
+
+.theme-btn[data-color="teal"] {
+ background-color: #008080;
+}
+
+
* {
margin: 0;
padding: 0;
@@ -105,6 +142,7 @@ body {
display: flex;
align-items: center;
z-index: 1001;
+ margin-left: 5%;
}
#theme-toggle {
@@ -231,6 +269,7 @@ body {
text-align: center;
color: #fff;
position: relative;
+ padding-top: 30px;
}
.hero-content {
@@ -331,13 +370,15 @@ body {
color: var(--primary-color);
}
-.event-date, .event-location {
+.event-date,
+.event-location {
font-size: 0.9rem;
color: var(--light-text-color);
margin-bottom: 0.5rem;
}
-.event-time, .past-event-time {
+.event-time,
+.past-event-time {
font-size: 0.9rem;
color: #555;
margin: 0.5rem 0;
@@ -411,6 +452,15 @@ body {
transform: translateX(50%) translateY(0);
}
+ .hero-content {
+ padding: 0 1rem;
+ margin-top: 35%;
+ }
+
+ .hero {
+ padding-top: 120px;
+ }
+
.hero h1 {
font-size: 2.5rem;
}
@@ -422,4 +472,183 @@ body {
.explore-button {
padding: 0.8rem 2rem;
}
+}
+
+/* Additional Responsive Styles for smaller screen width - apllied for mobile screens too*/
+
+/* For screens up to 600px */
+@media (max-width: 600px) {
+ .navbar-container {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .nav-items {
+ flex-direction: column;
+ align-items: center;
+ margin-top: 1rem;
+ }
+
+ .nav-links {
+ flex-direction: column;
+ align-items: center;
+ margin-right: 0;
+ margin-bottom: 1rem;
+ }
+
+ .nav-links li {
+ margin: 0.5rem 0;
+ }
+
+ .theme-switcher {
+ margin-top: 1rem;
+ }
+
+ .theme-options {
+ right: 50%;
+ transform: translateX(50%) translateY(-10px);
+ }
+
+ .theme-options.active {
+ transform: translateX(50%) translateY(0);
+ }
+
+ .hero {
+ padding-top: 140px;
+ }
+
+ .hero h1 {
+ font-size: 2rem;
+ }
+
+ .hero p {
+ font-size: 0.9rem;
+ }
+
+ .explore-button {
+ padding: 0.7rem 1.5rem;
+ }
+
+ .hero-content {
+ padding: 0 1rem;
+ margin-top: 40%;
+ }
+}
+
+/* For screens up to 480px */
+@media (max-width: 480px) {
+ .navbar-container {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .nav-items {
+ flex-direction: column;
+ align-items: center;
+ margin-top: 1rem;
+ }
+
+ .nav-links {
+ flex-direction: column;
+ align-items: center;
+ margin-right: 0;
+ margin-bottom: 1rem;
+ }
+
+ .nav-links li {
+ margin: 0.5rem 0;
+ }
+
+ .theme-switcher {
+ margin-top: 1rem;
+ }
+
+ .theme-options {
+ right: 50%;
+ transform: translateX(50%) translateY(-10px);
+ }
+
+ .theme-options.active {
+ transform: translateX(50%) translateY(0);
+ }
+
+ .hero {
+ padding-top: 160px;
+ }
+
+ .hero h1 {
+ font-size: 1.8rem;
+ }
+
+ .hero p {
+ font-size: 0.8rem;
+ }
+
+ .explore-button {
+ padding: 0.6rem 1.2rem;
+ }
+
+ .hero-content {
+ padding: 0 1rem;
+ margin-top: 45%;
+ }
+}
+
+/* For screens up to 360px */
+@media (max-width: 360px) {
+ .navbar-container {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .nav-items {
+ flex-direction: column;
+ align-items: center;
+ margin-top: 1rem;
+ }
+
+ .nav-links {
+ flex-direction: column;
+ align-items: center;
+ margin-right: 0;
+ margin-bottom: 1rem;
+ }
+
+ .nav-links li {
+ margin: 0.5rem 0;
+ }
+
+ .theme-switcher {
+ margin-top: 1rem;
+ }
+
+ .theme-options {
+ right: 50%;
+ transform: translateX(50%) translateY(-10px);
+ }
+
+ .theme-options.active {
+ transform: translateX(50%) translateY(0);
+ }
+
+ .hero {
+ padding-top: 180px;
+ }
+
+ .hero h1 {
+ font-size: 1.5rem;
+ }
+
+ .hero p {
+ font-size: 0.7rem;
+ }
+
+ .explore-button {
+ padding: 0.5rem 1rem;
+ }
+
+ .hero-content {
+ padding: 0 1rem;
+ margin-top: 50%;
+ }
}
\ No newline at end of file