Collection | Huge Movies
// Helper functions function filterMovies() let filtered = [...masterMovies]; if (activeGenre !== 'all') filtered = filtered.filter(m => m.genre === activeGenre); if (activeDecade !== 'all') const decadeStart = parseInt(activeDecade); filtered = filtered.filter(m => m.year >= decadeStart && m.year < decadeStart + 10);
<button id="showWatchlistBtn" class="watchlist-toggle">⭐ My Vault (0)</button> </div> </div>
function toggleWatchlist(movie) if (!movie) return; const exists = watchlist.some(w => w.id === movie.id); if (exists) watchlist = watchlist.filter(w => w.id !== movie.id); else watchlist.push( id: movie.id, title: movie.title, year: movie.year ); HUGE MOVIES COLLECTION
// 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);
</style> </head> <body>
function updateWatchlistBtnText() const btn = document.getElementById('showWatchlistBtn'); btn.innerText = ⭐ My Vault ($watchlist.length) ;
currentFiltered = filtered; visibleCount = 30; renderGrid(); // Helper functions function filterMovies() let filtered = [
.watchlist-badge margin-top: 8px; font-size: 0.7rem; background: #2a2a3a; display: inline-block; padding: 0.2rem 0.6rem; border-radius: 20px;