The Code

 
                     
// Global Variable -- Temporary --
const API_Key = "eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI5M2UxMzhkOTg1YTUwNzczZTQ1MDMxZmJiMGY1MjNlOCIsInN1YiI6IjYyMjhjZWU2ZTkyZDgzMDA0ODQyNThkNyIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.1CX_lKBbqeBoKBr2SKyJ46oV3iwsr_aUWWlM5XoMDAs"

// calls the API to get the movies
async function getMovies() {
  try {
    
    //  calls out to the API with the API_Key
    let response = await fetch('https://api.themoviedb.org/3/movie/popular', {
      headers: {
        'Authorization': `Bearer ${API_Key}`
      }
    });

    // return a JSON Object
    let data = await response.json();

    // returning the JSON Object
    return data;

  }
  catch (error) {

    console.error(error);
  }
}

// get a single movie
async function getMovie(id) {
  try {
    
    //  calls out to the API with the API_Key
    let response = await fetch(`https://api.themoviedb.org/3/movie/${id}`, {
    headers: {
      'Authorization': `Bearer ${API_Key}`
    }
    });
  
    // return a JSON Object
    let data = await response.json();
  
    // returning the JSON Object
    return data;
  
  }
  catch (error) {
  
    console.error(error);
  }
  }

async function displayMovies() {

  // calling this function to get the movies from the API
  let data = await getMovies();

  // HTML elements
  // movieList Div
  const movieListDiv = document.getElementById('movieList');
  
  // movieList Template
  const moviePosterTemplate = document.getElementById('movieCardTemplate');
  
  // Array of movies
  let movies = data.results;

  for (let i = 0; i < movies.length; i++) {
    // get each individual movie
    
    let movie = movies[i];
    
    // makes a copy of the template element !IMPORTANT! You must include "TRUE" in the cloneNode in order to 
    // access all of the child elements
    let movieCard = moviePosterTemplate.content.cloneNode(true);
    
    // look inside the template and find the first element with this class
    // adding the movie poster iamge to the element that is card-img-top
    let movieImageElement = movieCard.querySelector('.card-img-top')
    movieImageElement.src = `https://image.tmdb.org/t/p/w500${movie.poster_path}`;

    // accessing the h5 element (immediate child) in the card-body and adding the title
    let movieTitleElement = movieCard.querySelector('.card-body > h5');
    movieTitleElement.textContent = movie.title;

    // accessing the card-text to add the overview of the movie
    let movieDescriptionElement = movieCard.querySelector('.card-text');
    movieDescriptionElement.textContent = movie.overview;

    // modify the information for the button
    let movieButton = movieCard.querySelector('.btn-primary');
    movieButton.setAttribute('data-movieId', movie.id);

    // adding the movie card to the HTML page
    movieListDiv.appendChild(movieCard);
  }

}

async function showMovieDetails(clickedBtn, data) {
  // get the ID of the movie that was clicked
  let movieId = clickedBtn.getAttribute('data-movieId');

  //TESTING: put the movie ID in the modal
  // modalBody.textContent = `Movie ID is : ${movieId}`;
  
  
  // get the details of the movie with the ID from TMDB
  let movieData = await getMovie(movieId);
  
  // put those details into the modal
  let modalTitle = document.querySelector('#movieModal .modal-title');
  modalTitle.textContent = movieData.title
  
  let movieModalPoster = document.querySelector('#movieModalPoster')
  movieModalPoster.src = `https://image.tmdb.org/t/p/w500${movieData.poster_path}`;
  
  let movieModalOverview = document.querySelector('#movieModalOverview');
  movieModalOverview.innerHTML = `Movie Overview: ${movieData.overview}`;

  let movieModalTagline = document.querySelector('#movieModalTagline');
  movieModalTagline.innerHTML = `Tagline: "${movieData.tagline}"`;

  let movieModalPopularity = document.querySelector('#movieModalPopularity');
  movieModalPopularity.innerHTML = `Current Popularity: ${movieData.popularity}`;

  let movieModalReleaseDate = document.querySelector('#movieModalReleaseDate');
  movieModalReleaseDate.innerHTML = `Release Date: ${movieData.release_date}`;

  let movieModalRuntime = document.querySelector('#movieModalRuntime');
  movieModalRuntime.innerHTML = `Movie Runtime: ${movieData.runtime} minutes`;

  let movieModalGenres = document.querySelector('#movieModalGenres');
  let genres = [];
  for(let i = 0; i < movieData.genres.length; i++){
    genres += movieData.genres[i].name + ' ';
  }
  movieModalGenres.innerHTML = `Genre: ${genres}`;


  let movieModalHomepage = document.querySelector('a');
  movieModalHomepage.getAttribute("href");
  movieModalHomepage.setAttribute = ('href', `"${movieData.homepage}"`);


}
                    
                

The code is structured in four functions: getMovies(), getMovie(), displayMovies(), and code showMovieDetails().

The getMovies() function is the heart of this particular challenge, where the function makes a call out to the API along with important information such as the API Key. The response is then returned in a JSON format where the data can be used and manipulated to be formatted to be displayed to the user.

For the function getMovie() this function makes the API call again this time with the API KEY and the id of the particular movie you want to get specific information for. The data is returned in JSON format so the data can be used and manipulated to be displayed to the user.

displayMovies() uses data recieved from getMovies() to be able to display a list of movies on the page. Each movie is set up on a card utilizing Bootstrap Cards. The top 20 movies from the API are displayed on the page. Each movie can be chosen so that the information about the specific movie can be displayed. This is achieved with data being added to the showMovieDetails function. This function utilizes the API data for the individual movie that was requested.