function loadMore() if (visibleCount >= currentFiltered.length) return; visibleCount = Math.min(visibleCount + 30, currentFiltered.length); renderGrid(); if (visibleCount >= currentFiltered.length) document.getElementById('loadMoreBtn').style.opacity = '0.5'; document.getElementById('loadMoreBtn').innerText = "All movies loaded";
if (activeRating === '8') filtered = filtered.filter(m => m.rating >= 8); if (activeRating === '7') filtered = filtered.filter(m => m.rating >= 7 && m.rating < 8);
/* Movie Grid */ .movie-grid display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.8rem; padding: 2rem; max-width: 1400px; margin: 0 auto; HUGE MOVIES COLLECTION
.modal-content background: #181826; max-width: 700px; width: 90%; border-radius: 28px; padding: 1.8rem; position: relative;
<div id="movieGrid" class="movie-grid"></div> <div class="load-more-container"> <button id="loadMoreBtn" class="load-more-btn">LOAD MORE MOVIES</button> </div> function loadMore() if (visibleCount >= currentFiltered
/* Modal */ .modal display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); justify-content: center; align-items: center; z-index: 1000;
select, .sort-btn background: #0f0f17; border: 1px solid #333344; color: white; padding: 0.4rem 0.8rem; border-radius: 30px; cursor: pointer; font-size: 0.85rem; function loadMore() if (visibleCount >
// Event listeners document.getElementById('genreFilter').addEventListener('change', (e) => activeGenre = e.target.value; filterMovies(); ); document.getElementById('decadeFilter').addEventListener('change', (e) => activeDecade = e.target.value; filterMovies(); ); document.getElementById('ratingFilter').addEventListener('change', (e) => activeRating = e.target.value; filterMovies(); ); document.getElementById('sortBy').addEventListener('change', (e) => activeSort = e.target.value; filterMovies(); ); document.getElementById('loadMoreBtn').addEventListener('click', loadMore); document.getElementById('showWatchlistBtn').addEventListener('click', showOnlyWatchlist); document.querySelector('.close-modal').addEventListener('click', () => document.getElementById('movieModal').style.display = 'none'; ); document.getElementById('modalWatchlistBtn').addEventListener('click', () => toggleWatchlist(currentModalMovie); ); window.onclick = (e) => if(e.target === document.getElementById('movieModal')) document.getElementById('movieModal').style.display = 'none'; ;