From 7bff50aa93d412afab70d2974ace1826af5803f9 Mon Sep 17 00:00:00 2001 From: rpatel90 Date: Tue, 29 Nov 2022 17:50:48 -0500 Subject: [PATCH 1/2] added reviews + see also page --- index.js | 130 ++++++++++++++++++++++++++++++++++++++++++----------- styles.css | 35 +++++++++++++++ 2 files changed, 138 insertions(+), 27 deletions(-) diff --git a/index.js b/index.js index e26f241..b078569 100644 --- a/index.js +++ b/index.js @@ -108,8 +108,8 @@ function login() { } /* This will need to be stored somewhere else at some point for security reasons */ -const API_KEY = 'api_key=bb1d4e0661af455e02af1ea99fb85fcb'; const BASE_URL = 'https://api.themoviedb.org/3/'; +const API_KEY = 'api_key=bb1d4e0661af455e02af1ea99fb85fcb'; const SEARCH_QUERY = '&query=searchTerm'; /* This can be formatted to include whatever you want -- 'movie/upcoming' is just a placeholder for now */ //const API_URL_ = BASE_URL + '/movie/popular?/similar' + API_KEY + '&language=en-US&page=1'; @@ -118,7 +118,7 @@ const API_URL = BASE_URL + 'movie/popular?' + API_KEY + '&language=en-US&page=1'; getTrendingMovies(API_URL); -const API_URL2 = +/* const API_URL2 = BASE_URL + 'movie/top_rated?' + API_KEY + '&language=en-US&page=1'; getTopMovies(API_URL2); @@ -135,7 +135,7 @@ getPlayingMovies(API_URL6); const API_URL7 = BASE_URL + 'movie/upcoming?' + API_KEY + '&language=en-US&page=1'; -getUpcomingMovies(API_URL7); +getUpcomingMovies(API_URL7); */ const searchURL = BASE_URL + '/search/multi?' + API_KEY + '&language=en-US&page=1&query='; @@ -762,7 +762,7 @@ function showSlidea(n) { /* Makes an API fetch call to get movies with whatever url you want -- this could be for upcoming movies, popular, etc */ /* This will fetch the URL passed to it and will retrieve a list of movies. It will then loop through each movie, use its ID to construct the DETAIL_URL, and make another API call */ /* This second call will return even more information about each movie and will call displayMovies on each movie to display them with access to all of the information retrieved */ -function getTrendingMovies(url) { +function getTrendingMovies(url, urlone) { fetch(url) .then(res => res.json()) .then(data => { @@ -777,10 +777,8 @@ function getTrendingMovies(url) { movie.id + '?' + API_KEY + - '&language=en-US&append_to_response=videos,credits,similar,images'; + '&language=en-US&append_to_response=videos,reviews,similar,credits,similar,images'; - const TRAILER_URL = - BASE_URL + 'movie/' + movie.id + 'videos?' + API_KEY; fetch(DETAIL_URL) .then(res => res.json()) .then(data => { @@ -788,6 +786,7 @@ function getTrendingMovies(url) { }); }); }) + .catch(error => { console.log(error); }); @@ -795,25 +794,32 @@ function getTrendingMovies(url) { /* Passed a movie, which will contain all of the needed information about the individual movie (runtime, videos, etc) */ function displayTrendingMovies(data) { - console.log("Movie -- ", data); - const { - title, + const { + title, poster_path, vote_average, overview, backdrop_path, release_date, runtime, + reviews, budget, revenue, genres, status, tagline, + videos, + credits, + similar, id } = data; - + const backdrop_url = POSTER_URL + backdrop_path; const specialChar = title + id; + const specialCharReviews = id + title; + const specialCharSimilar = id + title + '&'; + const specialCharCast = id + title + '/'; + const movieEl = `
@@ -823,7 +829,7 @@ function displayTrendingMovies(data) { }" alt="poster" style="margin-right: 0px !important; height: 300px !important; width: 200px !important;"> -
+
-
@@ -887,10 +912,17 @@ function displayTrendingMovies(data) { onclick="moveSlide(1)" >❯ -
+ +
`; movieCarousel.innerHTML += movieEl; - getTrailer(videos.results, specialChar); + setTimeout(function () { + getTrailer(videos.results, specialChar); + }, 10); + + getReviews(reviews.results, specialCharReviews); + getSimilar(similar.results, specialCharSimilar); + getCast(credits.cast, specialCharCast); } /* Makes an API fetch call to get movies with whatever url you want -- this could be for upcoming movies, popular, etc */ @@ -1500,3 +1532,47 @@ async function getTrailer(videos, specialChar) { }); } else trailerCount--; } + +async function getCast(credits, specialChar) { + let i = 0; + if (credits.length != 5) { + credits.forEach(cred => { + if (i != 5) { + const castHTML = ` +

${cred.name}

+ ` + + document.getElementById(specialChar).innerHTML += castHTML; + i++; + } + }) + } +} + +async function getReviews(reviews, specialChar) { + if (reviews.length != 0) { + reviews.forEach(rev => { + const reviewHTML = ` +
+

${rev.author}
${rev.content}

+
`; + + document.getElementById(specialChar).innerHTML += reviewHTML; + }) + } +} + +async function getSimilar(movies, specialChar) { + if (movies.length != 0) { + movies.forEach(mov => { + const similarHTML = ` + + `; + + document.getElementById(specialChar).innerHTML += similarHTML; + }) + } +} \ No newline at end of file diff --git a/styles.css b/styles.css index 8ff8351..a061be6 100644 --- a/styles.css +++ b/styles.css @@ -63,6 +63,41 @@ main{ flex-wrap: wrap; justify-content: center; } + +.tooltip { + position: relative; + display: inline-block; +} + +/* Tooltip text */ +.tooltip .tooltiptext { + visibility: hidden; + background-color: rgba(0, 0, 0, 0.7); + color: #fff; + text-align: center; + padding: 5px 0; + border-radius: 6px; + + width: 190px; + top: 70%; + left: 50%; + margin-left: -95px; + + position: absolute; + z-index: 1; +} + +/* Show the tooltip text when you mouse over the tooltip container */ +.tooltip:hover .tooltiptext { + visibility: visible; +} + +.modal-button-one { + display:flex; + flex-wrap:wrap; + justify-content:center; +} + .search{ background-color: #373338; border: 2px solid white; From b113f5482d0891d56957e03561b38157b6523de2 Mon Sep 17 00:00:00 2001 From: rpatel90 Date: Wed, 30 Nov 2022 21:08:03 -0500 Subject: [PATCH 2/2] copied trending carousel to the other carousel and find tuned details --- index.js | 829 ++++++++++++++++++++++++++++++++++++++++------------- styles.css | 9 + 2 files changed, 634 insertions(+), 204 deletions(-) diff --git a/index.js b/index.js index b078569..de21615 100644 --- a/index.js +++ b/index.js @@ -118,7 +118,7 @@ const API_URL = BASE_URL + 'movie/popular?' + API_KEY + '&language=en-US&page=1'; getTrendingMovies(API_URL); -/* const API_URL2 = +const API_URL2 = BASE_URL + 'movie/top_rated?' + API_KEY + '&language=en-US&page=1'; getTopMovies(API_URL2); @@ -135,7 +135,7 @@ getPlayingMovies(API_URL6); const API_URL7 = BASE_URL + 'movie/upcoming?' + API_KEY + '&language=en-US&page=1'; -getUpcomingMovies(API_URL7); */ +getUpcomingMovies(API_URL7); const searchURL = BASE_URL + '/search/multi?' + API_KEY + '&language=en-US&page=1&query='; @@ -762,7 +762,7 @@ function showSlidea(n) { /* Makes an API fetch call to get movies with whatever url you want -- this could be for upcoming movies, popular, etc */ /* This will fetch the URL passed to it and will retrieve a list of movies. It will then loop through each movie, use its ID to construct the DETAIL_URL, and make another API call */ /* This second call will return even more information about each movie and will call displayMovies on each movie to display them with access to all of the information retrieved */ -function getTrendingMovies(url, urlone) { +function getTrendingMovies(url) { fetch(url) .then(res => res.json()) .then(data => { @@ -777,7 +777,7 @@ function getTrendingMovies(url, urlone) { movie.id + '?' + API_KEY + - '&language=en-US&append_to_response=videos,reviews,similar,credits,similar,images'; + '&language=en-US&append_to_response=videos,reviews,similar,credits,similar,images,watch/providers'; fetch(DETAIL_URL) .then(res => res.json()) @@ -819,7 +819,38 @@ function displayTrendingMovies(data) { const specialCharReviews = id + title; const specialCharSimilar = id + title + '&'; const specialCharCast = id + title + '/'; + const specialCharWatchProviders = id + title + '.'; + let movieGenre = ''; + let formattedRevenue = ''; + let formattedBudget = ''; + + /* Formats the revenue and budget into USD */ + const formatter= new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'USD', + }) + + genres.forEach(genre => { + movieGenre += genre.name + ", "; + }) + + if (revenue == 0) { + formattedRevenue = "N/A"; + } else { + formattedRevenue = formatter.format(revenue); + } + + if (budget == 0) { + formattedBudget = "N/A"; + + } else { + formattedBudget = formatter.format(budget); + } + + genres.forEach(genre => { + movieGenre += genre.name + ", "; + }) const movieEl = `
@@ -856,19 +887,29 @@ function displayTrendingMovies(data) {