Movie Search

Implementation of Movie Search API

Type the name of a movie into the search field and click submit. The data will be requested from the TMDb API and displayed on the DOM.

🎬Title:

🎬Overview:

🎬Release date:

Application created by Mike Shine

Tutorial: How to use TMDb API

Want to learn to use use a movie search API and create a web app like this? Let's go through it together.

Note: Some intermediate knowledge of HTML, inline CSS, and JavaScript is needed.

themoviedb.org / Getting an API key

Step 1– Follow this link to create an account on themoviedb.org. After signing up, you can register for an API key by clicking the API link from within your account settings page.

Step 2– Open the full documentation in another tab for later reference.

Code part one – HTML

Step 3– Create a new .html file and start with this code:

      
        <!DOCTYPE html>
          <html>
            <head>
              <meta charset="UTF-8">
              <title>Movie Search</title>
              <style>
                .enclosure {
                  background-color: midnightblue;
                  color: aliceblue;
                  border: 5px groove;
                }
                </style>
            </head>

Note: The entire <style> section is completely optional, or customizable to your liking. They are merely style elements for visual interest and do not affect the functionality at all.

Step 4– Add this HTML code below your previous HTML code.

      
        <body>
          <div class="enclosure">
          <form>
              🎥Movie: <input id="movieTitle" size="25px" placeholder="Type the name of a movie" />
              <button type="submit" id="submit">🎥Submit</button>
              </form>
              <p id="title">🎬Title: </p>
              <p id="overview">🎬Overview: </p>
              <p id="release-date">🎬Release date: </p>
              <img id="poster">

This code block contains the visible DOM text elements and the search bar. All the functionality will be added later.

Code part 2 – JavaScript

All of this JavaScript code is written inside the same HTML file as above, inside <script> tags.

Step 5– Add this JavaScript code to the bottom of the <body> section, just above the </body> tag.

      
        <script>
          var apiKey = 'YOUR_API_KEY_HERE';
          var button = document.getElementById('submit');
          button.addEventListener('click', (e) => {
            e.preventDefault();
            movieSearch();
          });

          async function movieSearch() {
            var userQuery = document.getElementById('movieTitle').value;
            var url = `https://api.themoviedb.org/3/search/movie?api_key=${apiKey}&query=${userQuery}`;
            let response = await fetch(url);
            if (!response.ok) {
                console.log('HTTP error; status: ', response.status);
            } else {
              let data = await response.json();
              console.log(data);

This code creates the submit button functionality, defines the asynchronous function that makes the API call, and produces a JSON object of the response.

Step 6– Add this JavaScript code immediately after the previous code block:

      
        document.getElementById('title').textContent = `🎬Title: ${data.results[0].title}`

        document.getElementById('overview').textContent = `🎬Overview: ${data.results[0].overview}`

        document.getElementById('release-date').textContent = `🎬Release date: ${data.results[0].release_date}`

        document.getElementById('poster').src = `https://image.tmdb.org/t/p/w342${data.results[0].poster_path}`;
      }
    }
    </script>

This code renders the relevant data from the API response to the DOM.

The magenta-colored code fragments I chose represent title, overview, and release date. However, they can be replaced with whichever data elements in the response object you want (see below).

Step 7– Check out the table below to see all the different data elements that our API call returned. Note: All response data can be found in the relevant documentation, underneath the Responses heading.

Element	JSON path	Description	Data type	Notes
Poster path	`.poster_path`	The url fragment that accesses an image of the movie poster	string	See this page for more information on how to build a complete image URL
Overview	`.overview`	Provides a plot summary of the movie	string
Release date	`.release_date`	Returns the date the movie was released	string	Format is YYYY-MM-DD
Original language	`.original_language`	Indicates the original primary language of the movie	string	Format is a two letter language code (click here for a full list of ISO 639-1 language codes)
Title	`.title`	The title of the movie	string
Popularity	`.popularity`	Indicates the average popularity of the movie	float	This popularity element has a range of 0-100

Important note: Each of the JSON path code fragments must be preceded by data.results[0]. The data object is the JSON-formatted version of the API response, and results[0] accesses the data of the first search result in the response.

Step 8– Using the example code and table above, customize your app to display the information you want it to display.

Finishing touches

Step 9– Add this code to the end of your project to close it up:

      
        </div>
      </body>
    </html>

Your app should be functioning as expected now! If you are experiencing issues, check out my full code for this implementation below:

      
        <div class="enclosure">
        <form>
              🎥Movie: <input id="movieTitle" size="25px" placeholder="Type the name of a movie" />
              <button type="submit" id="submit">🎥Submit</button>
              </form>
              <p id="title">🎬Title: </p>
              <p id="overview">🎬Overview: </p>
              <p id="release-date">🎬Release date: </p>
              <img id="poster">
              </div>
              <script>
          var apiKey = 'YOUR_API_KEY_HERE';
          var button = document.getElementById('submit');
          button.addEventListener('click', (e) => {
            e.preventDefault();
            movieSearch();
          });

          async function movieSearch() {
            var userQuery = document.getElementById('movieTitle').value;
            var url = `https://api.themoviedb.org/3/search/movie?api_key=${apiKey}&query=${userQuery}`;
            let response = await fetch(url);
            if (!response.ok) {
                console.log('HTTP error; status: ', response.status);
            } else {
              let data = await response.json();
              console.log(data);

              document.getElementById('title').textContent = `🎬Title: ${data.results[0].title}`;

              document.getElementById('overview').textContent = `🎬Overview: ${data.results[0].overview}`;

              document.getElementById('release-date').textContent = `🎬Release date: ${data.results[0].release_date}`;

              document.getElementById('poster').src = `https://image.tmdb.org/t/p/w342${data.results[0].poster_path}`;
            }
          }
          </script>
          </div>
          </body>
          </html>

You should now have a functioning movie search web application! All credit for the API itself goes to The Movie Database (TMDb) and their awesome developer resources.