The Code

          
            const API_KEY = 'eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJhNzlhNjJiOTJhOWNhYzQ2M2M5NzhjZDA4OTUwYWUwZiIsInN1YiI6IjYwODVlZjczNTMyYWNiMDA1ODg3MWI2YSIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ._HkCsGSbSSyz0cnITBswX3mgp7gwXhrQcc9t2abAnQQ'

async function getMovies() {
  try {
    let response = await fetch('https://api.themoviedb.org/3/movie/popular',
      {
        headers: {
          'Authorization': `Bearer ${API_KEY}`
        }
      });

    let data = await response.json();
    return data;

  } catch (error) {
    console.error(error);
  }
}

async function displayMovies() {
  const movieListDiv = document.getElementById('movie-list');
  const moviePosterTemplate = document.getElementById('movie-card-template');

  let data = await getMovies();

  let movies = data.results; //movies is an array of objects

  movies.forEach(movie => {
    let movieCard = moviePosterTemplate.content.cloneNode(true);
    let titleElement = movieCard.querySelector('.card-body > h5');
    titleElement.textContent = movie.title;
    let descriptionElement = movieCard.querySelector('p.card-text');
    descriptionElement.textContent = movie.overview;
    let movieImgElement = movieCard.querySelector('.card img');
    movieImgElement.setAttribute("src", `https://image.tmdb.org/t/p/w500${movie.poster_path}`)
    let infoBtn = movieCard.querySelector('button.btn');
    infoBtn.setAttribute('data-movieId', movie.id)
    movieListDiv.appendChild(movieCard);
  });
};

async function showMovieDetails(btn) {
  let movieModal = document.getElementById('movie-modal');
  let movieId = btn.getAttribute('data-movieId');
  document.getElementById("movie-modal-paragraph").textContent = movieId;

  try {
    let response = await fetch(`https://api.themoviedb.org/3/movie/${movieId}`,
      {
        headers: {
          'Authorization': `Bearer ${API_KEY}`
        }
      });

    let data = await response.json();

    document.getElementById('modal-title').textContent = data.original_title;
    document.getElementById('movie-modal-paragraph').textContent = data.overview;
    document.getElementById('popularity').textContent = data.popularity;
    document.getElementById('status').textContent = data.status;
    document.getElementById('genres').textContent = data.genres[0].name + " " + "|" + " "
      + data.genres[1].name + "  " + "|" + " " + data.genres[2].name;
    document.getElementById('release-date').textContent = new Date(data.release_date).toLocaleDateString();
    document.getElementById('movie-img').setAttribute("src", `https://image.tmdb.org/t/p/w500${data.poster_path}`);
  } catch (error) {
    console.error(error);
  }
}

          
        

The code is structured in three functions

getMovies()

getMovies() is a async function that makes a GET call to the TMDB API in order to return a list movies to display on the page. variable

displayMovies()

displayMovies() is a function that uses the data fetched in the GET API call from getMovies(). Once the data is recieved, a forEach() is used to loop through the data object and that object is used to build the template element that holds different HTML elements to display the movie and information about that movie. In addtion to building the different HTML elements with data from the object, a custom attriubute is set on the button in order to be used by the showMOvieDetails(btn) function.

showMovieDetails(btn)

showMovieDetails(btn) is a async fucntion that takes a button as a parameter. From this parameter, the custom attribute data-moiveId is used in the GET API call in order to return details about a particular movie. Once the data is recieved, that data is used to build the movie modal which will display more details about the movie once the more info button is clicked.