Huge Movies Collection Link

<div class="filter-group"> <label>📅 Decade</label> <select id="decadeFilter"> <option value="all">All</option> <option value="1980">80s</option> <option value="1990">90s</option> <option value="2000">2000s</option> <option value="2010">2010s</option> <option value="2020">2020+</option> </select> </div>

.load-more-btn background: #f5c518; color: #0a0c10; border: none; padding: 0.8rem 2rem; border-radius: 40px; font-weight: bold; cursor: pointer;

function updateWatchlistBtnText() const btn = document.getElementById('showWatchlistBtn'); btn.innerText = ⭐ My Vault ($watchlist.length) ; HUGE MOVIES COLLECTION

/* 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;

// sorting if (activeSort === 'title') filtered.sort((a,b) => a.title.localeCompare(b.title)); if (activeSort === 'year') filtered.sort((a,b) => b.year - a.year); if (activeSort === 'rating') filtered.sort((a,b) => b.rating - a.rating); .load-more-btn background: #f5c518

// attach click listeners for modal document.querySelectorAll('.movie-card').forEach(card => card.addEventListener('click', (e) => const id = parseInt(card.dataset.id); const movie = masterMovies.find(m => m.id === id); openModal(movie); ); ); updateWatchlistBtnText();

function renderGrid() const grid = document.getElementById('movieGrid'); const toShow = currentFiltered.slice(0, visibleCount); if (toShow.length === 0) grid.innerHTML = <div class="no-results">🎞️ No movies match. Try different filters!</div> ; return; padding: 0.8rem 2rem

currentFiltered = filtered; visibleCount = 30; renderGrid();

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;

localStorage.setItem('movieVault', JSON.stringify(watchlist)); renderGrid(); // refresh badges updateWatchlistBtnText(); if (document.getElementById('movieModal').style.display === 'flex') const btn = document.getElementById('modalWatchlistBtn'); btn.innerText = watchlist.some(w => w.id === movie.id) ? '❌ Remove from My Vault' : '➕ Add to My Vault';