// Render movies grid function renderMovies() { const filtered = getFilteredMovies(); const moviesToShow = filtered.slice(0, visibleMovies); const grid = document.getElementById("moviesGrid");
grid.innerHTML = moviesToShow.map(movie => ` <div class="movie-card" data-id="${movie.id}"> <img class="movie-poster" src="${movie.poster}" alt="${movie.title} Poster"> <div class="movie-info"> <div class="movie-title">${movie.title}</div> <div class="movie-release">📅 ${movie.releaseDate}</div> <div class="movie-genre">${movie.genre.toUpperCase()}</div> <div class="movie-description">${movie.description}</div> <button class="reminder-btn" data-id="${movie.id}" data-title="${movie.title}">🔔 Remind Me</button> </div> </div> `).join('');
.filter-btn { background: rgba(255,255,255,0.2); border: none; padding: 0.7rem 1.5rem; border-radius: 30px; color: white; font-size: 1rem; cursor: pointer; transition: all 0.3s ease; backdrop-filter: blur(5px); } punjabi upcoming movies
.reminder-btn:hover { background: #e67e22; }
// Modal handling const modal = document.getElementById("reminderModal"); let currentMovieTitle = ""; // Render movies grid function renderMovies() { const
// Event Listeners document.addEventListener("DOMContentLoaded", () => { renderMovies(); setupFilters();
/* Responsive */ @media (max-width: 768px) { .feature-header h1 { font-size: 2rem; } const moviesToShow = filtered.slice(0
.movie-poster { width: 100%; height: 380px; object-fit: cover; background: #ddd; }