Movie Garden: Using API

In order to grab data with a 3rd-party API, use the fetch method in a try...catch statement so that the app can gracefully inform the user of an issue if there is one trying to access the data. This needs to go inside an async function with the await keyword proceeding fetch since it takes awhile (comparatively) to grab the data from the API and return it.

CHECK OUT THE APP >> HERE <<!

 

CODE EXPLANATION

Movie Garden was created with the following functions.

getMovies grabs data about the most popular movies from "The Movide DB" (TMDB) using their API with the fetch method in a try...catch statement. With the try...catch statement the app can gracefully inform the user of an issue if there is one trying to access the data instead of just breaking. In this case it'll show a sweet alert. This needs to go inside an async function with the await keyword proceeding fetch since it takes awhile (comparatively) to grab the data from the API and return it.

getMovie is similar to getMovies except instead of using the API to get data for the most popular movies, it uses the API to get detailed data for one movie. The one movie is identified with the movieId which is a parameter for this function and used in the API call using string interpolation.

displayMovies shows the movies that are passed in as a parameter on the page. This is done by first grabbing the HTML element the cards are to be placed in. A template tag is used on the elements of the card so the same structure can be used for each of the cards. This is used in conjunction with a for loop to modify each element of the card template for each movie and add it to the element the cards are to be placed in. The most unique element that was modified is the button where a custom data-movieId attribute was set on each of the cards so that the Id of the movie could be accessed when the "More Info" button is clicked.

displayAllMovies uses getMovies to grab the popular movie data from TMBD and passes that data as an argument of displayMovies.

showMovieDetails puts the details of the movie into the modal when the "More Info" button is clicked. The button that was clicked is a parameter of this function. Using the custom data-movieId attribute on the button, movieId is passed as an argument to getMovie. The elements of the modal are then filled in the with data received back from the API call.

displayGenres takes in an array of genres for a specific movie as a parameter. It then gets the element from the modal that is to hold the genre badges to display all the genres associated with a particular movie.

filterByGenre takes in a clicked filter button as a parameter. From that button, the genreId is grabbed which is then used with the movies returned by getMovies. Using a for loop, each of the movies are checked to see if they have a genreId which includes the genreId of the filter button that was clicked. If it does, the movie is placed in a new array. This array is then passed as an argument to displayMovies so that only those movie cards are shown on the page.

WHAT I LEARNED

• There are functions that take awhile to run. These require the await keyword to be placed before it. If an await keyword is required it needs to be inside an async function. The await keyword allows for the following function to finish doing its job before continuing with the rest of the async function. For example when used with fetch to get data from an API.
• Use a try...catch statement to control what happens if something goes wrong when implementing resources from 3rd-party sources. For example using fetch to access data from an API about movies. If an error happens, the catch block can be coded to present the user with information about what happened and next possible actions with a great UI experience.
• When trying to display similar elements on a page where only the content is changing, use HTML templates to easily recreate the elements and replace the content accordingly along with .content.cloneNode(true) on the template element in the DOM.

IMPROVEMENTS

• Make sidebar sticky.
• Add also "Now Playing", "Top Rated", "Upcoming", "Trending" movie lists.
• A feature where a user can come to visit the page and their favorite movies can be saved to a list that is stored in the local storage.