https://superb-hamster-34c5dc.netlify.app/js/site.js

1const API_KEY = "eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI2ZjQyMmQ4ZTc3YTczYTU2ZWJjNjBhYTliZjBkNjdjNiIsInN1YiI6IjY1MmVlMTg5YTgwMjM2MDBlMGFjNzg3NiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.cujIti81xy50tbwjxfJiN5xOsCAg2HsLfueUwYFJlCI";
2
3// Calls the API and gets the movies, async tells it to wait, returns movie array
4async function getMovies() {
5
6    // attempt to run this code, used when incorporating information from other people so it doesn't break our code, not for your own code that you can control
7    try {
8
9                        // waiting for asyncronous operation to go to a url and comes back with a response
10        let response = await fetch('https://api.themoviedb.org/3/movie/popular', {
11            headers: {
12                'Authorization': `Bearer ${API_KEY}`
13            }
14        });
15
16        // changes the string recieved back and parses it into JSON object which is a javascript object in javascript
17        let data = await response.json();
18
19        return data.results;
20
21        // if something goes wrong, run this backup code
22    } catch (error) {
23        swal.fire({
24            icon: 'error',
25            backdrop: false,
26            title: 'Oops!',
27            text: 'Something went wrong reaching the TMBD API.'
28        })
29
30        // say return false or zero and then grab that value if something went wrong in the other functions
31    }
32}
33
34// Calls the API and gets information for the one movie
35async function getMovie(movieId) {
36
37        // attempt to run this code, used when incorporating information from other people so it doesn't break our code, not for your own code that you can control
38    try {
39
40                        // waiting for asyncronous operation to go to a url and comes back with a response
41        let response = await fetch(`https://api.themoviedb.org/3/movie/${movieId}`, {
42            headers: {
43                'Authorization': `Bearer ${API_KEY}`
44            }
45        });
46
47        // changes the string recieved back and parses it into JSON object which is a javascript object in javascript
48        let data = await response.json();
49
50        return data;
51
52        // if something goes wrong, run this backup code
53    } catch (error) {
54        swal.fire({
55            icon: 'error',
56            backdrop: false,
57            title: 'Oops!',
58            text: 'Something went wrong reaching the TMBD API.'
59        })
60    }
61
62}
63
64async function getGenres() {
65
66    // attempt to run this code, used when incorporating information from other people so it doesn't break our code, not for your own code that you can control
67try {
68
69                    // waiting for asyncronous operation to go to a url and comes back with a response
70    let response = await fetch(`https://api.themoviedb.org/3/genre/movie/list`, {
71        headers: {
72            'Authorization': `Bearer ${API_KEY}`
73        }
74    });
75
76    // changes the string recieved back and parses it into JSON object which is a javascript object in javascript
77    let data = await response.json();
78
79    return data;
80
81    // if something goes wrong, run this backup code
82} catch (error) {
83    console.error(error);
84}
85
86}
87
88function displayMovies(movies) {
89    // always going to be same so using const instead of let, 
90    const movieListDiv = document.getElementById('movie-list');
91    movieListDiv.textContent = '';
92    const moviePosterTemplate = document.getElementById('movie-card-template');
93
94
95    for (let i = 0; i < movies.length; i++) {
96
97        let movie = movies[i];
98
99        // Get all the child elements to copy over as well when cloneNode(true), if false instead of true is used, then no child elements
100        let movieCard = moviePosterTemplate.content.cloneNode(true);
101

102        // Uses a CSS selector to get the element and reassign the value of the img src attribute
103        let movieImgElement = movieCard.querySelector('.card-img-top');
104        movieImgElement.src = `https://image.tmdb.org/t/p/w500${movie.poster_path}`
105
106        // Get the element holding the movie title and replace the text with the title of the movie
107        let movieTitleElement = movieCard.querySelector('.card-body > h5');
108        movieTitleElement.textContent = movie.title;
109
110        // Get the element holding the paragraph information and replace the text with the summary of movie
111        let movieParagraphElement = movieCard.querySelector('.card-text');
112        movieParagraphElement.textContent = movie.overview;
113
114        // Make up own attribute to assign movie id to access this information later
115        let movieButton = movieCard.querySelector('.btn-primary');
116        movieButton.setAttribute('data-movieId', movie.id);
117
118        // Add the revised card to the page
119        movieListDiv.appendChild(movieCard);
120    } 
121
122}
123
124// Needs to wait for getMovies so have to use async in front of function
125async function displayAllMovies() {
126
127    // put if return from error is a certain value do something like try again or show error image
128    // if (data == undefined || status_code )
129
130    let movies = await getMovies();
131
132    displayMovies(movies);
133    
134}
135
136async function showMovieDetails(clickedBtn) {
137
138    // get the ID of the movie that was clicked
139    let movieId = clickedBtn.getAttribute('data-movieId');
140
141
142    // get the details of the movie with that ID from TMBD API
143    let movieData = await getMovie(movieId);
144
145    // Modify Img on Modal
146   let movieImg = document.querySelector('#movieModal .movie-image');
147   movieImg.src = `https://image.tmdb.org/t/p/w500${movieData.poster_path}`
148
149   // Modify Title on Modal
150   let modalTitle = document.querySelector('#movieModal .movie-title');
151   modalTitle.textContent = movieData.title;
152
153   // Modify Tagline on Modal
154   let modalTagline = document.querySelector('#movieModal .tagline');
155   modalTagline.textContent = `${movieData.tagline}`;
156
157   // Display genres on page
158   displayGenres(movieData.genres);
159
160   // Modify overview summary of Modal
161   let modalBody = document.querySelector('#movieModal .overview');
162   modalBody.textContent = movieData.overview;
163       
164   // Modify homepage website button links to on Modal
165   let moviePageBtn = document.querySelector('#movieModal .btn-primary');
166   moviePageBtn.href = movieData.homepage;
167
168   // Modify Release Date
169   let releaseDateMonth = document.getElementById('month');
170   releaseDateMonth.textContent = movieData.release_date.slice(5,7);
171
172   let releaseDateDay = document.getElementById('day');
173   releaseDateDay.textContent = movieData.release_date.slice(8,10);
174
175   let releaseDateYear = document.getElementById('year');
176   releaseDateYear.textContent = movieData.release_date.slice(0,4);
177
178   // Modify Runtime
179   let runtime = document.getElementById('runtime');
180   runtime.textContent = movieData.runtime;
181
182   // Modify Voter average
183   // To fixed rounds number to the amount of decimals placed in argument, parentheses needed
184   // around number to avoid errors with integers
185   let voteAvg = document.getElementById('voteAvg');
186   voteAvg.textContent = (movieData.vote_average).toFixed(2);
187
188   // Modify Voter count
189   let voteCount = document.getElementById('voteCount');
190   voteCount.textContent = movieData.vote_count;
191 
192
193}
194
195// Add genre badges to genre div on page with all Genres associated with movie
196function displayGenres(movieGenreArray) {
197
198    // Get div element to hold genre badges
199    const genreDiv = document.getElementById('genres');
200    genreDiv.textContent = '';
201
202    // loop through each item in array and add genre element to div element
203    for (let i = 0; i < movieGenreArray.length; i++) {
204
205        let badge = document.createElement('span');
206        badge.classList.add('badge','text-bg-success','mx-1');
207        badge.textContent = movieGenreArray[i].name;
208        genreDiv.appendChild(badge);
209
210    }
211
212}
213
214// add html string of font awesome icons to genre object from API
215// async function displayGenreFilter() {
216
217//     // get genre object from API
218//     let genreData = await getGenres();
219//     let genreArray = genreObject.genres;
220
221//     // add genre icons to object
222//     for (let i = 0; i < genreArray.length; i++) {
223
224//         <i class="fa-solid fa-person-running"></i>
225//     }
226// }   
227
228async function filterByGenre(filterBtn) {
229
230    // Get the genre ID of the btn filter that was clicked
231    let genreId = parseInt(filterBtn.getAttribute('data-genreId'));
232
233    // Grab the movies Array from the database
234    let movies = await getMovies();
235
236    // Declare new array to put the filtered movies into
237    let filteredMovies = [];
238
239    // For movies that equal the id, put it into new movie array
240    for (let i = 0; i < movies.length; i++) {
241
242        // get genre for movie
243        let movieGenreIds = movies[i].genre_ids;
244
245        // remove movie from array if it doesnt have genreId
246        if ( movieGenreIds.includes(genreId) ) {
247            filteredMovies.push(movies[i]);
248        }
249    }
250
251    // Display movies based on new filtered array

252    displayMovies(filteredMovies);
253
254}