Skip to main content

​
Movie Browsing and Filtering

The Movies page provides a comprehensive browsing experience with advanced filtering options, allowing users to discover movies by genre, release year, and various sorting criteria.

​
Overview

The movie browsing feature includes:
  • Genre Filters: 25 different genres including Action, Adventure, Sci-Fi, Horror, and more
  • Year Filters: Filter by specific years (2003-2023) or decades (1980s, 1990s, 2000s)
  • Sort Options: Multiple sorting criteria including rating, views, and release date
  • Search Functionality: Keyword-based movie search
  • Pagination: Navigate through large movie collections

​
Filter System

​
Genre Filter

The genre filter supports multiple selections with 25 different categories: 
<div class="movies-filter-dropdown">
  <button id="filter-genre" class="movies-filter-dropdown-button">
    <i class="fa fa-folder-open"></i>
    Genre: <span>All</span>
  </button>
  <ul id="filter-genre-dropdown" class="filter-dropdown">
    <li><input name="genre[]" type="checkbox" id="genre_action" value="25"><label for="genre_action">Action</label></li>
    <li><input name="genre[]" type="checkbox" id="genre_adventure" value="17"><label for="genre_adventure">Adventure</label></li>
    <li><input name="genre[]" type="checkbox" id="genre_scifi" value="15"><label for="genre_scifi">Sci-Fi</label></li>
    <!-- More genres... -->
  </ul>
</div>
Genre filters use checkbox inputs allowing users to select multiple genres simultaneously.

​
Available Genres

The platform supports these genres:
  • Action, Adventure, Animation, Biography, Costume
  • Comedy, Crime, Documentary, Drama, Family
  • Fantasy, Game-Show, History, Horror, Kungfu
  • Music, Mystery, Reality-TV, Romance, Sci-Fi
  • Sport, Thriller, TV Show, War, Western

​
Year Filter

Filter movies by release year with options for specific years or decades: 
<div class="movies-filter-dropdown movies-filter-dropdown-2-col">
  <button id="filter-year" class="movies-filter-dropdown-button">
    <i class="fa fa-calendar"></i>
    Year: <span>All</span>
  </button>
  <ul id="filter-year-dropdown" class="filter-dropdown">
    <li><input name="release[]" type="checkbox" id="release_2023" value="2023"><label for="release_2023">2023</label></li>
    <li><input name="release[]" type="checkbox" id="release_2022" value="2022"><label for="release_2022">2022</label></li>
    <!-- More years... -->
    <li><input name="release[]" type="checkbox" id="release_2000s" value="2000s"><label for="release_2000s">2000s</label></li>
    <li><input name="release[]" type="checkbox" id="release_1990s" value="1990s"><label for="release_1990s">1990s</label></li>
    <li><input name="release[]" type="checkbox" id="release_1980s" value="1980s"><label for="release_1980s">1980s</label></li>
  </ul>
</div>

​
Sort Options

Seven different sorting criteria available: 
<div class="movies-filter-dropdown">
  <button id="filter-sort" class="movies-filter-dropdown-button">
    <i class="fa fa-sort"></i>
    Sort: <span>Default</span>
  </button>
  <ul id="filter-sort-dropdown" class="filter-dropdown">
    <li><input name="sort" id="sort_default" type="radio" value="default" checked="checked"><label for="sort_default">Default</label></li>
    <li><input name="sort" id="sort_post_date" type="radio" value="post_date"><label for="sort_post_date">Recently Added</label></li>
    <li><input name="sort" id="sort_views" type="radio" value="views"><label for="sort_views">Most Watched</label></li>
    <li><input name="sort" id="sort_title" type="radio" value="title"><label for="sort_title">Name</label></li>
    <li><input name="sort" id="sort_imdb" type="radio" value="imdb"><label for="sort_imdb">IMDb</label></li>
    <li><input name="sort" id="sort_year" type="radio" value="year"><label for="sort_year">Release Date</label></li>
    <li><input name="sort" id="sort_rated_scores" type="radio" value="rated_scores"><label for="sort_rated_scores">Site Rating</label></li>
  </ul>
</div>
Sort options use radio buttons since only one sorting criterion can be active at a time.

​
Filter Dropdown Interactions

The filter dropdowns are controlled by JavaScript event handlers: 
const filterSortBtn = document.getElementById('filter-sort');
const filterGenreBtn = document.getElementById('filter-genre');
const filterYearBtn = document.getElementById('filter-year');
const filterSortDropdown = document.getElementById('filter-sort-dropdown');
const filterGenreDropdown = document.getElementById('filter-genre-dropdown');
const filterYearDropdown = document.getElementById('filter-year-dropdown');

filterSortBtn.addEventListener('click', function (e) {
  e.preventDefault()
  e.stopPropagation();
  filterSortDropdown.style.display = "block";
  filterGenreDropdown.style.display = "none";
  filterYearDropdown.style.display = "none";
});

filterGenreBtn.addEventListener('click', function (e) {
  e.preventDefault()
  e.stopPropagation();
  filterGenreDropdown.style.display = "block";
  filterSortDropdown.style.display = "none";
  filterYearDropdown.style.display = "none";
});

filterYearBtn.addEventListener('click', function (e) {
  e.preventDefault()
  e.stopPropagation();
  filterYearDropdown.style.display = "block";
  filterSortDropdown.style.display = "none";
  filterGenreDropdown.style.display = "none";
});
Each filter button click prevents default behavior and stops propagation to ensure proper dropdown management.

​
Search Feature

The search functionality allows users to find movies by keywords: 
<div class="movies-search-container">
  <div class="movies-search">
    <form class="movies-search-form" autocomplete="off" action="#">
      <span>
        <i class="fa fa-search movies-search-icon"></i>
        <input class="movies-search-input" type="text" name="keyword" placeholder="Enter your keywords..." autocomplete="off">
      </span>
    </form>
  </div>
</div>

​
Movie Display

Movies are displayed in a responsive grid layout: 
<div class="movies">
  <a href="../pages/movie.html" tabindex="0" role="button" class="movie movie-flexbox">
    <img class="movie-image" src="../images/movies/fast_and_furious.jpg">
    <div class="movie-caption">
      <span class="movie-caption-title">Fast & Furious 9</span><br>
      <span class="movie-caption-year">2022 • 102 m</span><br>
    </div>
  </a>
  <!-- More movies... -->
</div>
The platform includes popular titles such as:
  • Fast & Furious 9, Tenet, Red Notice, Morbius
  • Inception, Matrix, The Avengers, Dune
  • Jurassic Park, Black Panther, Wrath Of Man, Avatar
  • Hunger Games, Shutter Island, A Quiet Place, Escape Room
  • Resident Evil, Scream, Moonfall, John Wick 3
  • It, Joker, Parasite, Creed II

​
Pagination

Navigate through movie collections with pagination controls: 
<div class="movies-pagination">
  <ul class="movies-pagination-container movies-pagination-ul">
    <li><a href="#">«</a></li>
    <li><a href="#" class="movies-pagination-active">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">→</a></li>
    <li><a href="#">»</a></li>
  </ul>
</div>

​
File Locations

  • HTML: ~/workspace/source/pages/movies.html
  • JavaScript: ~/workspace/source/scripts/movies-filters.js
  • Styles: ~/workspace/source/style.css

Build docs developers (and LLMs) love

Get started for freeTalk to us