Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Made event cards clickable in past events section #20

Merged
merged 3 commits into from
Dec 23, 2024
Merged

Made event cards clickable in past events section #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
936730d
updated past events section
Astha86 Dec 19, 2024
745320c
Added changes
Rakesh9100 Dec 23, 2024
69bc568
Removed extra sapce
Rakesh9100 Dec 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions assets/pastevents/pastevents.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,12 @@ body {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
margin-bottom: 2rem;
cursor: pointer;
}

.past-card-link{
text-decoration: none;
all: unset;
}

.past-event-card:hover {
Expand Down
73 changes: 50 additions & 23 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,13 @@ function createEventCard(event, isPastEvent = false) {
}

// Get the components for the desired format
const weekday = new Intl.DateTimeFormat('en-US', { weekday: 'long' }).format(eventDateObj);
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 monthName = new Intl.DateTimeFormat('en-US', {
month: 'long'
}).format(eventDateObj);
const yearNum = eventDateObj.getUTCFullYear();

// Combine components into the desired format
Expand All @@ -61,15 +65,17 @@ function createEventCard(event, isPastEvent = false) {

return `
<div class="${isPastEvent ? 'past-event-card' : 'event-card'}">
<img src="${event.image}" alt="${event.title}" class="${isPastEvent ? 'past-event-image' : 'event-image'}">
<div class="${isPastEvent ? 'past-event-details' : 'event-details'}">
<h3 class="${isPastEvent ? 'past-event-title' : 'event-title'}">${event.title}</h3>
<p class="${isPastEvent ? 'past-event-date' : 'event-date'}">${formattedDate}</p>
<p class="${isPastEvent ? 'past-event-time' : 'event-time'}">${event.time || 'Time not specified'}</p>
<p class="${isPastEvent ? 'past-event-location' : 'event-location'}">${event.location || 'Location not specified'}</p>
<p class="${isPastEvent ? 'past-event-description' : 'event-description'}">${event.description || 'No description available'}</p>
<a href="${event.website || '#'}" target="_blank" rel="noopener noreferrer" class="${buttonClass}">${buttonText}</a>
</div>
<a href="${event.website || '#'}" target="_blank" rel="noopener noreferrer" class="${isPastEvent ? 'past-card-link' : 'card-link'}">
<img src="${event.image}" alt="${event.title}" class="${isPastEvent ? 'past-event-image' : 'event-image'}">
<div class="${isPastEvent ? 'past-event-details' : 'event-details'}">
<h3 class="${isPastEvent ? 'past-event-title' : 'event-title'}">${event.title}</h3>
<p class="${isPastEvent ? 'past-event-date' : 'event-date'}">${formattedDate}</p>
<p class="${isPastEvent ? 'past-event-time' : 'event-time'}">${event.time || 'Time not specified'}</p>
<p class="${isPastEvent ? 'past-event-location' : 'event-location'}">${event.location || 'Location not specified'}</p>
<p class="${isPastEvent ? 'past-event-description' : 'event-description'}">${event.description || 'No description available'}</p>
<a href="${event.website || '#'}" target="_blank" rel="noopener noreferrer" class="${buttonClass}">${buttonText}</a>
</div>
</a>
</div>
`;
}
Expand Down Expand Up @@ -137,19 +143,34 @@ window.addEventListener('scroll', () => {
});

// Theme switcher functionality
document.addEventListener('DOMContentLoaded', function() {
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' },
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) => {
Expand All @@ -165,23 +186,29 @@ document.addEventListener('DOMContentLoaded', function() {

// Set initial theme, logo, and favicon based on localStorage
if (savedTheme && themeAssets[savedTheme]) {
const { logo, favicon } = themeAssets[savedTheme];
const {
logo,
favicon
} = themeAssets[savedTheme];
document.documentElement.setAttribute('data-theme', savedTheme);
logoImage.src = logo;
updateFavicon(favicon);
}

themeToggle.addEventListener('click', function() {
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() {
button.addEventListener('click', function () {
const color = this.getAttribute('data-color');
if (themeAssets[color]) {
const { logo, favicon } = themeAssets[color];
const {
logo,
favicon
} = themeAssets[color];
document.documentElement.setAttribute('data-theme', color);
localStorage.setItem('theme', color);
logoImage.src = logo;
Expand All @@ -193,7 +220,7 @@ document.addEventListener('DOMContentLoaded', function() {
});

// Close theme options when clicking outside
document.addEventListener('click', function(event) {
document.addEventListener('click', function (event) {
if (!themeToggle.contains(event.target) && !themeOptions.contains(event.target)) {
themeOptions.classList.remove('active');
themeToggle.setAttribute('aria-expanded', 'false');
Expand Down Expand Up @@ -229,7 +256,7 @@ document.addEventListener('DOMContentLoaded', () => {

// Smooth scroll to top on button click
toTop.addEventListener("click", (e) => {
e.preventDefault(); // Prevent default anchor behavior
e.preventDefault(); // Prevent default anchor behavior
window.scrollTo({
top: 0,
behavior: 'smooth'
Expand Down
Loading