The Code
async function getPopularMovies() {
const popularMoviesUrl = 'https://api.themoviedb.org/3/movie/popular';
let response = await fetch(popularMoviesUrl, {
headers: {
'Authorization': `Bearer ${API_KEY}`
}
})
let data = await response.json();
return data.results;
// .then(response => response.json())
// .then(data => displayMovies(data.results));
}
async function displayPopularMovies() {
let movies = await getPopularMovies();
displayMovies(movies);
}
function displayMovies(movies) {
// get our movie card template
const movieCardTemplate = document.getElementById('movie-card-template');
// find the element where the movie card will go
const movieRow = document.getElementById('movie-row');
movieRow.innerHTML = '';
// for each movie in the movies array
movies.forEach(movie => {
// -copy the template
let movieCard = movieCardTemplate.content.cloneNode(true);
// - modify it for this movie
let titleElement = movieCard.querySelector('.card-body > h5');
titleElement.textContent = movie.title;
let descriptionElement = movieCard.querySelector('.card-text');
descriptionElement.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('.btn-primary');
infoButton.setAttribute('data-movieId', movie.id);
let favoriteButton = movieCard.querySelector('.btn-outline-primary');
favoriteButton.setAttribute('data-movieId', movie.id);
// - add it to the page
movieRow.appendChild(movieCard);
});
}
async function getMovieDetails(infoBtn) {
const movieId = infoBtn.getAttribute("data-movieId");
let data = await getMovie(movieId);
displayMovieDetails(data);
}
async function getMovie(movieId) {
const movieDetailsUrl = `https://api.themoviedb.org/3/movie/${movieId}`;
let response = await fetch(movieDetailsUrl, {
headers: {
'Authorization': `Bearer ${API_KEY}`
}
});
let data = await response.json();
return data;
}
function displayMovieDetails(movieDetails) {
let movieModal = document.getElementById('movieModal');
let modalTitle = movieModal.querySelector('.modal-title');
let moviePoster = movieModal.querySelector('#movie-poster');
let movieTitle = movieModal.querySelector('#movie-title');
let movieDetailsContainer = movieModal.querySelector('#movie-details');
modalTitle.textContent = movieDetails.title;
moviePoster.setAttribute('src', 'https://image.tmdb.org/t/p/w500' + movieDetails.poster_path);
movieTitle.textContent = movieDetails.title;
movieDetailsContainer.innerHTML = '';
const detailsArray = [
`Release Date: ${movieDetails.release_date}`,
`Runtime: ${movieDetails.runtime} mins`,
`Overview: ${movieDetails.overview}`
];
detailsArray.forEach(detail => {
let detailElement = document.createElement('p');
detailElement.textContent = detail;
movieDetailsContainer.appendChild(detailElement);
});
$('#movieModal').modal('show');
}
function displayFavoriteMovies() {
let movies = getFavoriteMovies();
displayMovies(movies);
}
async function addFavoriteMovie(btn) {
// save one new movie to our list of favorites
let movieId = btn.getAttribute('data-movieId');
let favorites = getFavoriteMovies();
let duplicateMovie = favorites.find(movie => movie.id == movieId);
if (duplicateMovie === undefined) {
let newFavorite = await getMovie(movieId);
favorites.push(newFavorite);
saveFavoriteMovies(favorites);
}
}
function removeFavoriteMovie(btn) {
// remove one movie from our list of favorites
let movieId = btn.getAttribute('data-movieId');
let favorites = getFavoriteMovies();
favorites = favorites.filter(movie => movie.id != movieId);
saveFavoriteMovies(favorites);
displayFavoriteMovies();
}
function saveFavoriteMovies(movies) {
// save a complete list of our favorite movies
let moviesAsString = JSON.stringify(movies);
localStorage.setItem('ss-favorite-movies', moviesAsString);
}
function getFavoriteMovies() {
// retrive our list of favorite movies
let favoriteMovies = localStorage.getItem('ss-favorite-movies');
if (favoriteMovies == null) {
favoriteMovies = [];
saveFavoriteMovies(favoriteMovies);
} else {
favoriteMovies = JSON.parse(favoriteMovies);
}
//return that list
return favoriteMovies;
}
The code is structured in 11 functions
getPopularMovies()
The getPopularMovies function fetches a list of popular movies from the Movie Database API.
It uses the fetch method with a Bearer token for authorization to access the data.
The response is converted to JSON format.
This function returns the results, which are the popular movies.
The returned data is then used to display the movies on the page.
displayPopularMovies()
The displayPopularMovies function calls getPopularMovies to fetch the popular movies data.
It waits for the data to be fetched using the await keyword.
Once the data is retrieved, it calls displayMovies to render the movies on the web page.
This function serves as a bridge between fetching the data and displaying it.
It ensures that the movies are fetched and displayed asynchronously.
displayMovies()
The displayMovies function takes an array of movie objects and displays them on the web page.
It uses a template for each movie card and fills in the movie details like title, overview, and poster image.
The function then appends each movie card to the movie row container on the page.
It uses a forEach loop to iterate through the array of movies.
This function is responsible for dynamically generating and inserting HTML content for each movie.
getMovieDetails(infoBtn)
The getMovieDetails function fetches detailed information about a specific movie using its ID.
It retrieves the movie ID from a button's data attribute.
The function then calls getMovie to fetch the movie details from the API.
After fetching the details, it calls displayMovieDetails to display the information.
This function is triggered when a user clicks on a movie's info button.
getMovie(movieId)
The getMovie function fetches detailed information about a specific movie using its ID.
It constructs the API URL using the movie ID and sends a fetch request with the appropriate headers.
The response is converted to JSON format and returned.
This function is used to retrieve all necessary details about a movie.
The data fetched by this function is used to display detailed movie information on the page.
displayMovieDetails(movieDetails)
The displayMovieDetails function updates the HTML content of a modal to show detailed information about a movie.
It sets the modal title, poster image, and various movie details such as release date, runtime, and overview.
The function is called with the movie details object as a parameter.
It modifies the content of the modal window to reflect the movie details.
Finally, it shows the modal window using jQuery's modal method.
displayFavoriteMovies()
The displayFavoriteMovies function retrieves the user's favorite movies from local storage.
It calls getFavoriteMovies to get the list of favorite movies.
The function then uses displayMovies to display these favorite movies on the page.
This allows users to see their saved favorite movies.
It ensures that the favorites list is displayed when needed.
addFavoriteMovie(btn)
The addFavoriteMovie function adds a movie to the user's list of favorite movies.
It retrieves the movie ID from the button's data attribute.
The function checks if the movie is already in the favorites list to avoid duplicates.
If the movie is not a duplicate, it fetches the movie details and adds the movie to the favorites list.
Finally, it saves the updated list of favorite movies to local storage.
removeFavoriteMovie(btn)
The removeFavoriteMovie function removes a movie from the user's list of favorite movies.
It retrieves the movie ID from the button's data attribute.
The function filters out the movie with the specified ID from the favorites list.
It then saves the updated list of favorite movies to local storage.
Finally, it updates the display to reflect the changes.
saveFavoriteMovies(movies)
The saveFavoriteMovies function saves the user's list of favorite movies to local storage.
It converts the movies array to a JSON string.
The function then stores this string in local storage with the key 'ss-favorite-movies'.
This ensures that the favorite movies list persists between sessions.
It allows the user to retain their favorite movies even after closing the browser.
getFavoriteMovies()
The getFavoriteMovies function retrieves the user's list of favorite movies from local storage.
It checks if the list exists in local storage.
If not, it initializes an empty list and saves it to local storage.
The function returns the list of favorite movies.
This function ensures that the favorite movies list can be accessed whenever needed.