Movie Search & Filter (Vanilla JS) — Headout Round 1 Solved

Overview

This document presents a solution to a front-end coding challenge encountered during a Senior Front-End Engineer interview at Headout. The challenge focuses on building a dynamic movie search and filter component using Vanilla JavaScript. The goal is to implement real-time search functionality based on substring and subsequence matching, along with genre-based filtering, using data fetched from a remote API.

Interview Rounds

Round 1: JavaScript Coding Challenge - Real-Time Movie Search & Filter (Vanilla JS)

The candidate was tasked with implementing the following requirements:

• Render an unstyled list of movies.
• Implement real-time search using substring matching.
• Enable genre-based filtering.
• Support subsequence matching (e.g., input "hp" should match "Harry Potter").

Fetching Movie Data

The provided API endpoint is:

let movieDBJSON = [];

async function fetchMovies() {
  let movieDBJSONString = await fetch(
    "https://gist.githubusercontent.com/saniyusuf/406b843afdfb9c6a86e25753fe2761f4/raw/523c324c7fcc36efab8224f9ebb7556c09b69a14/Film.JSON"
  );
  return (movieDBJSON = await movieDBJSONString.json());
}

This function asynchronously fetches movie data from the specified URL and parses it as JSON.

Populating Movies in HTML List

The following code populates the movie data into an HTML list:

async function populateMovieData() {
  let movies = await fetchMovies();

  let moviesListHTML = document.getElementById("movieList").innerHTML;
  movies.forEach((movie) => {
    console.log(movie.Title);
    moviesListHTML += `<li>${movie.Title}</li>`;
  });
  document.getElementById("movieList").innerHTML = moviesListHTML;
}

This function retrieves the movie data using fetchMovies(), then iterates through the data and appends each movie title to the HTML list element with the ID movieList.

Searching Movies based on Name, Sub-sequence, and Genre

function searchMovie() {
  let searchTerm = document.getElementById("search").value;
  let genreTerm = document.getElementById("searchGenre").value;
  let movies = movieDBJSON.filter((movie) => {
    return (
      (movie.Title.toLowerCase().includes(searchTerm.toLowerCase()) ||
        isSubsequenceOf(searchTerm.toLowerCase(), movie.Title.toLowerCase())) &&
      movie.Genre.toLowerCase().includes(genreTerm.toLowerCase())
    );
  });
  document.getElementById("movieList").innerHTML = "";
  let moviesListHTML = "";
  movies.forEach((movie) => {
    console.log(movie.Title);
    moviesListHTML += `<li>${movie.Title}</li>`;
  });
  document.getElementById("movieList").innerHTML = moviesListHTML;
}