Huge: Movies Collection

<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>

<div id="movieGrid" class="movie-grid"></div> <div class="load-more-container"> <button id="loadMoreBtn" class="load-more-btn">LOAD MORE MOVIES</button> </div> HUGE MOVIES COLLECTION

.rating color: #f5c518; font-weight: bold; ); // User watchlist (localStorage) let watchlist = JSON

// State let currentFiltered = [...masterMovies]; let visibleCount = 30; let activeGenre = 'all'; let activeDecade = 'all'; let activeRating = 'all'; let activeSort = 'title'; .movie-year font-size: 0.8rem

// generate 250+ movies let masterMovies = []; for (let i = 0; i < 260; i++) const year = 1985 + Math.floor(Math.random() * 40); const genre = genres[Math.floor(Math.random() * genres.length)]; const rating = (Math.random() * 3 + 6).toFixed(1); // 6.0 - 9.1 masterMovies.push( id: i, title: titles[i % titles.length] + (i > titles.length ? $Math.floor(i/titles.length)+1 : ''), year: year, genre: genre, rating: parseFloat(rating), poster: https://picsum.photos/seed/movie$i/300/450 , synopsis: A $genre masterpiece from $year. Vastly acclaimed and part of the HUGE COLLECTION. );

// User watchlist (localStorage) let watchlist = JSON.parse(localStorage.getItem('movieVault')) || [];

.movie-year font-size: 0.8rem; color: #aaa; margin: 0.3rem 0;