const API_KEY = 'eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI4OThkMWE4NGE1MWY3YWNiOTc0MjgzZTUyYWFjZWRlMCIsInN1YiI6IjY0YzE2ODVkZGI0ZWQ2MDEzYmYzNmJhZiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.cFFIhtrrNbBuSvSMm_kYQ4Y7hBaFAyvoWNZ5YRx7sVw'
                        // https://api.themoviedb.org/3/movie/popular
                        
                        
                        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 getMovieDetails(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');
                                titleElement.textContent = movie.title;
                        
                                let movieParagraphElement = movieCard.querySelector('.card-text');
                                movieParagraphElement.textContent = movie.overview;
                        
                                let movieImgElement = movieCard.querySelector('.card-img-top');
                                movieImgElement.setAttribute('src', `https://image.tmdb.org/t/p/w500${movie.poster_path}`);
                        
                        
                                let infoButton = movieCard.querySelector('button.btn');
                                infoButton.setAttribute('id', movie.id );
                        
                        
                                movieListDiv.appendChild(movieCard);
                        
                        
                            });
                        
                        
                        }
                        
                        
                        
                         
                        async function showMovieDetails(btn) {
                        
                            let movieId = btn.getAttribute('id');
                        
                            let movieDetails = await getMovieDetails(movieId);
                        
                            document.getElementById('modal-movie-title').textContent = movieDetails.title;
                            document.getElementById('modal-img').src =`https://image.tmdb.org/t/p/w500${movieDetails.poster_path}`;
                            document.getElementById('modal-paragraph').textContent = movieDetails.overview;
                            document.getElementById('modal-genre').textContent = movieDetails.genre;
                        }
                        
                        
                        
                    
                

The Code is structured in four funtions.

getMovies

This function makes an asynchronous request to the API endpoint https://api.themoviedb.org/3/movie/popular to fetch a list of popular movies. It uses the fetch() function to send the HTTP GET request, including the Authorization header with the API key. Once the response is received, it is parsed as JSON, and the resulting data is returned as an object of movies and their properties.

getMovieDetails

This function takes a movieId as a parameter and makes an asynchronous request to the API endpoint https://api.themoviedb.org/3/movie/{movieId} to fetch the details of a specific movie. Similar to getMovies(), it sends a GET request with the Authorization header containing the API key. Once the response is received, it is parsed as JSON, and the resulting data is returned.

displayMovies

This function is responsible for displaying the list of movies on the webpage. It first retrieves the movie list container element and the movie card template element from the HTML document. It then calls the getMovies() function to fetch the movie data. Once the data is received, it iterates over the movies array and clones the movie card template for each movie. It updates the cloned card with the movie's title, overview, and poster image URL. Finally, it appends the cloned card to the movie list container, displaying it on the webpage.

ShowMovieDetails

This function is triggered when a user clicks on the "info" button of a movie card. It retrieves the movie ID from the button's id attribute. It then calls the getMovieDetails(movieId) function to fetch the details of the selected movie. Once the movie details are received, it updates the modal elements in the HTML document with the movie's title, poster image, overview, and genre.

These functions work together to fetch movie data from the API, display the movie list on the webpage, and show detailed information about a selected movie when the "info" button is clicked.