static/js/main.js

document.addEventListener('DOMContentLoaded', () => {
    // Existing functionality: Redirect to movie details page when clicked

    const movies = document.querySelectorAll('.movie');

    movies.forEach(movie => {
        movie.addEventListener('click', () => {
            // Redirect to movie details page when clicked
            const link = movie.querySelector('a');
            if (link) {
                window.location.href = link.href;
            }
        });
    });


    // New functionality: Create and handle "Go to Top" button
    const goToTopButton = document.createElement('button');
    goToTopButton.classList.add('go-to-top');
    goToTopButton.innerHTML = `
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 5.293l-6.293 6.293 1.414 1.414L12 8.121l4.879 4.879 1.414-1.414L12 5.293z"/>
        </svg>
    `;
    document.body.appendChild(goToTopButton);

    window.addEventListener('scroll', () => {
        if (window.scrollY > 200) {
            goToTopButton.style.display = 'block';
        } else {
            goToTopButton.style.display = 'none';
        }
    });

    goToTopButton.addEventListener('click', () => {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });
});

// Get all elements with the class "option"
const options = document.querySelectorAll('.option');

// Attach a click event listener to each option element
options.forEach(option => {
  option.addEventListener('click', function() {
    // Remove the "active" class from all option elements
    options.forEach(el => el.classList.remove('active'));

    // Add the "active" class to the clicked option element
    this.classList.add('active');
  });
});