The Code

const API_KEY = "eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI4OTgxYTU4OGIxMGE3ZTllNzRjMGFhYjUwNWQ5MWExZiIsInN1YiI6IjY1MmVlMWExMDI0ZWM4MDExZTM1OWJhOCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.Hmug88MC6q75pV1WJhGLU0seYmOOnKzQYuzX_KY5c4U"

async function getMovies() {      // calls API and gets movies
    try {

        let response = await fetch('https://api.themoviedb.org/3/movie/popular', {  // get the movie db from the net
            headers: {
                'Authorization': `Bearer ${API_KEY}`
            }
        });

        let data = await response.json();  // assingn the db to variable 'data'

        /*
            data = {
                page: 1,
                results: [ {}, {}, {}...]
                total_pages: 29045,
                total_results: 817902
            }
        */

        return data;

    } catch (error) {
        Swal.fire({
            backdrop: false,
            title: 'Ooops!',
            text: 'Something went wrong reaching the TMDV API.',
            icon: 'error'
        })
    }
}

async function getMovie(movie_id) {      // calls API and gets movies


    try {

        let response = await fetch(`https://api.themoviedb.org/3/movie/${movie_id}`, {  // get the movie db from the net
            headers: {
                'Authorization': `Bearer ${API_KEY}`
            }
        });

        let data = await response.json();  // assingn the db to variable 'data'


        return data;

    } catch (error) {
        Swal.fire({
            backdrop: false,
            title: 'Ooops!',
            text: 'Something went wrong reaching the TMDV API.',
            icon: 'error'
        })
    }
}


async function displayMovies() {

    let data = await getMovies();  // call the movies from the getMovies function

    const movieListDiv = document.getElementById('movie-list');
    movieListDiv.innerHTML = '';  // prevents repeats of adds of movie list
    const moviePosterTemplate = document.getElementById('movie-card-template');

    let movies = data.results;   // create a variable from the results


    for (let i = 0; i < movies.length; i++) {

        let movie = movies[i];  // cycle through each movie one at a time

        let movieCard = moviePosterTemplate.content.cloneNode(true);  // get a copy of template and assign it

        let movieImageElement = movieCard.querySelector('.card-img-top');  // lock onto .card-img-top template
        movieImageElement.src = `https://image.tmdb.org/t/p/w500${movie.poster_path}`;  //load the image to movieImageElement

        let movieTitleElement = movieCard.querySelector('.card-body > h5');  // get the move title from app.html
        movieTitleElement.textContent = movie.title;  // target movie title only and apply it

        let movieParagraphElement = movieCard.querySelector('.card-text')  // target the element of .card-text
        movieParagraphElement.textContent = movie.overview;  // target movie overview and apply it

        let movieButton = movieCard.querySelector('.btn-primary');
        movieButton.setAttribute('data-movieId', movie.id);

        movieListDiv.appendChild(movieCard); // adding movie details to the card movieListDiv


    }
}

// get the movie genres
async function getGenres() {

    // attempting to get genre dae from the movie database
    try {

        // wait for async response from URL
        let response = await fetch(`https://api.themoviedb.org/3/genre/movie/list`, {
            headers: {
                'Authorization': `Bearer ${API_KEY}`
            }
        });

        // take the string returned back adn convert it to JSON object
        let data = await response.json();

        return data;

        // if something goes wrong, run this backup code
    } catch (error) {
        console.error(error);
    }

}

async function showMovieDetails(clickedBtn) {

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

    let moviedata = await getMovie(movieId);


    //TESTING: put the movie ID in the modal

    let poster = document.querySelector('#movieModal .poster');
    poster.src = `https://image.tmdb.org/t/p/w500${moviedata.poster_path}`;


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

    let movieOverview = document.querySelector('#movieOverview');
    movieOverview.innerHTML = `Overview:  ${moviedata.overview}`;


    let format = {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 0,
        maximumFractionDigits: 0
    };


    let movieBudget = document.querySelector('#movieBudget');
    movieBudget.innerHTML = `Budget:  ${moviedata.budget.toLocaleString('en-US', format)}`;


    let movieRuntime = document.querySelector('#movieRuntime');
    movieRuntime.innerHTML = `Runtime:  ${moviedata.runtime} minutes`;

    let dateFormat = {
        year: 'numeric',
        month: 'numeric',
        day: 'numeric'
    };

    let movieReleaseDate = document.querySelector('#movieReleaseDate');
    movieReleaseDate.innerHTML = `Release Date:  ${new Date(moviedata.release_date).toLocaleDateString('en-US', dateFormat)}`;

    // ADD GENRES
    let movieGenres = document.querySelector('#movieGenres');
    let genres = [];

    for (let i = 0; i < moviedata.genres.length; i++) {
        genres.push(moviedata.genres[i].name);
    }
        let genreString = genres.join(', ');

    movieGenres.innerHTML = `Genres: ${genreString}`;

    let movieHomepage = document.getElementById('movieHomepageBtn');
    movieHomepage.href = moviedata.homepage;


}