The Code

                    
                        const API_KEY= 'xxxxxxxxx';

                        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 getMovie(movieId) {
                          try {
                            let response = await fetch(`https://api.themoviedb.org/3/movie/${movieId}`, {
                              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.forEach(movie => {
                            let movieCard = moviePosterTemplate.content.cloneNode(true);
                            let titleElement = movieCard.querySelector('.card-body > h5');
                            let descriptionElement = movieCard.querySelector('.card-text');
                            let posterElement = movieCard.querySelector('.card img');
                            let infoButton = movieCard.querySelector('button.btn');
                        
                            titleElement.textContent = movie.title;
                            descriptionElement.textContent = movie.overview;
                            posterElement.setAttribute('src', `https://image.tmdb.org/t/p/w500${movie.poster_path}`);
                            infoButton.setAttribute('data-movieId', movie.id);
                        
                            movieListDiv.appendChild(movieCard);
                          });
                        }
                        
                        
                        async function displayModal(btn) {
                          const movieModal = document.getElementById('movie-modal');
                        
                          let movieId = btn.getAttribute('data-movieId');
                          let movie = await getMovie(movieId);
                          let titleElement = movieModal.querySelector('.modal h5');
                          let posterElement = movieModal.querySelector('.modal img');
                          let descriptionElement = movieModal.querySelector('.modal p');
                          let linkElement = movieModal.querySelector('.modal a');
                        
                          document.getElementById('genre').innerHTML = `<strong>Genre:</strong><br/> ${movie.genres[0].name}`;
                          document.getElementById('homepage').innerHTML = `<strong>Homepage:</strong><br/> <a href="${movie.homepage}">${movie.homepage}</a>`;
                          document.getElementById('runtime').innerHTML = `<strong>Runtime:</strong><br/> ${movie.runtime}`;
                          document.getElementById('tagline').innerHTML = `<strong>Tagline:</strong><br/> ${movie.tagline}`;
                        
                        
                          titleElement.textContent = movie.title;
                          descriptionElement.textContent = movie.overview;
                          posterElement.setAttribute('src', `https://image.tmdb.org/t/p/w500${movie.poster_path}`);
                          linkElement.setAttribute('href', `https://tmdb.org/movie/${movieId}`);
                        }
                        
                    
                

This JavaScript code defines several functions that work together to fetch movie data from "The Movie Database" (TMDb) API and display it on a web page.

The getMovies() asynchronous function fetches a list of popular movies from the TMDb API. It uses the fetch() function with the await keyword to perform the API request and then parses the response using response.json() to obtain the data in JSON format. The API request includes an Authorization header with a bearer token (API_KEY) to authenticate the request. It uses a try-catch block to make sure it gets a response before running the rest of the code. The getMovie() function does the same thing except for a specific movie instead of a list of the most popular.

The displayMovies() function displays a list of popular movies on a web page. It first calls getMovies() to obtain the movie data and then iterates over each movie in the data using movies.forEach(). For each movie, it creates a template clone using the moviePosterTemplate and populates it with movie information (title, description, poster, and info button). Each movie card is appended to the movieListDiv element on the web page.

When the infoButton is clicked the displayModal() function displays a modal (popup) with detailed information about a specific movie. The function extracts the movieId from the button's data attribute, then calls getMovie(movieId) to fetch the detailed movie data. It then updates the modal elements with the movie's title, description, poster, and additional information like genre, homepage link, runtime, and tagline.