sonic-bloom-fest / script.js
MoShow's picture
Create a music festival landing page with artist/band lineup, stage schedule, venue map, ticket options with early bird pricing, photo gallery from previous years, camping information, FAQ, and buy tickets button.
36a4617 verified
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Countdown timer to festival
function updateCountdown() {
const festivalDate = new Date('July 15, 2023 16:00:00').getTime();
const now = new Date().getTime();
const distance = festivalDate - now;
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById('countdown').innerHTML = `
<div class="countdown-item">
<span class="countdown-number">${days}</span>
<span class="countdown-label">Days</span>
</div>
<div class="countdown-item">
<span class="countdown-number">${hours}</span>
<span class="countdown-label">Hours</span>
</div>
<div class="countdown-item">
<span class="countdown-number">${minutes}</span>
<span class="countdown-label">Minutes</span>
</div>
<div class="countdown-item">
<span class="countdown-number">${seconds}</span>
<span class="countdown-label">Seconds</span>
</div>
`;
}
// Initialize countdown
updateCountdown();
setInterval(updateCountdown, 1000);
// Ticket hover effect
document.querySelectorAll('.ticket-card').forEach(card => {
card.addEventListener('mouseenter', () => {
card.style.transform = 'translateY(-10px)';
});
card.addEventListener('mouseleave', () => {
card.style.transform = 'translateY(0)';
});
});