The movie app needs you create an account in the movie db beacuse you need this access to get the data

const API_KEY = "ADD API KEY HERE"

const API_URL = 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key='+API_KEY+'&page=1'
const IMG_PATH = 'https://image.tmdb.org/t/p/w1280'
const SEARCH_API = 'https://api.themoviedb.org/3/search/movie?api_key='+API_KEY+'&query="'

The new part in this path is the oner related to take information from another services, in this case a movie information provider. This information is obtained using the function getMovies(url)

getMovies(API_URL)

async function getMovies(url) {
    const res = await fetch(url)
    const data = await res.json()

    showMovies(data.results)
}

Using the fetch API is at the beginign challeging because this not return us data we can consume. We have to do something this. In fact, the fetch API return a response. As we can see in the documentation:

The Response object, in turn, does not directly contain the actual JSON response body but is instead a representation of the entire HTTP response.

Using Fetch

To extract the data the documentation tell us we could use the json method:

So, to extract the JSON body content from the Response object, we use the json() method, which returns a second promise that resolves with the result of parsing the response body text as JSON.

Using Fetch

The fech API resturn a Promise:

The fetch() method takes one mandatory argument, the path to the resource you want to fetch. It returns a Promise that resolves to the Response to that request — as soon as the server responds with headers — even if the server response is an HTTP error status. 

Fetch API

And for using the promise we also have to understand that we need to use the ‘async’ keyword. Fetch is an asynchronous operation wich may take some time to complete.

A Promise is an object representing the eventual completion or failure of an asynchronous operation. Since most people are consumers of already-created promises, this guide will explain consumption of returned promises before explaining how to create them.

Using promises

After finishing the new part, which is retrieve the promise, know the request an load the information in a variable we can load the information in the innerHTML:

function showMovies(movies){
    main.innerHTML = ''

    movies.forEach((movie) => {
        const {title, poster_path, vote_average, overview} = movie

        const movieEl = document.createElement('div')
        movieEl.classList.add('movie')

        movieEl.innerHTML = `
        <img src="${IMG_PATH + poster_path}" alt="${title}"/>
        <div class="movie-info">
            <h3>${title}</h3>
            <span class="${getClassByRate(vote_average)}">${vote_average}</span>
        </div>
        <div class="overview">
          <h3>Overview</h3>
          ${overview}
        </div>`
        main.appendChild(movieEl)
    })
}

You can see the code in this GitHub Repository: 17.movie_app and the demo of the project is here: Movie App