From 9f8c1f76e7a849fb16e586223d6cc004823e8476 Mon Sep 17 00:00:00 2001 From: Son Nguyen Date: Mon, 18 Dec 2023 20:51:50 +0700 Subject: [PATCH] Updated frontend logic --- about.html | 67 ++--- actor-details.html | 1 - actor-details.js | 72 +++++- app.js | 11 +- director-details.html | 62 +++++ director-details.js | 232 +++++++++++++++++ index.html | 93 +++++-- movie-details.js | 152 ++++++++--- script.js | 589 ++++++++++++++++++++++++++++++++++++++---- style.css | 74 ++++++ 10 files changed, 1203 insertions(+), 150 deletions(-) create mode 100644 director-details.html create mode 100644 director-details.js diff --git a/about.html b/about.html index c19a3195..0b4051bc 100644 --- a/about.html +++ b/about.html @@ -8,41 +8,48 @@ -
-

The MovieVerse - About Us

- - - - - -
+
+

The MovieVerse - About Us

+ + + + + +
-
-

About The MovieVerse

+
+

About The MovieVerse

-

Welcome to The MovieVerse, crafted by Son Nguyen Hoang (David), a sanctuary for movie enthusiasts and a tribute to the cinematic world. The MovieVerse is not just a website but a journey through the diverse landscape of film. It's where curiosity meets the vast universe of cinema.

+

Welcome to The MovieVerse, your ultimate destination for exploring the magic of movies. Created with a vision to celebrate cinematic art, The MovieVerse offers a unique platform for movie lovers to discover, engage, and immerse themselves in the world of film.

-

Core Features:

-
    -
  • Expansive Movie Catalog: Dive into an extensive collection of films, encompassing various genres, languages, and periods, showcasing the rich tapestry of global cinema.
    • -
  • Intuitive Search Capabilities: Utilize advanced search options to navigate through the database seamlessly. Discover movies by keywords, actors, directors, or custom filters.
    • -
  • Rich Movie Details: Each film in our catalog comes with detailed descriptions, including synopses, cast and crew information, ratings, and curated reviews.
    • -
  • User Reviews and Ratings: Share your perspective with a community of movie buffs. Rate movies and write reviews to contribute to the collective wisdom of The MovieVerse.
    • -
  • Interactive Features: Engage with features like "Movie of the Day," "Random Movie Fact," and personalized movie recommendations to enhance your discovery experience.
    • -
  • Community Engagement: Connect with fellow cinephiles through forums, discussions, and trivia games. The MovieVerse is a community-driven platform encouraging interaction and sharing.
    • -
+

Core Features:

+
    +
  • Curated Movie Collections: Explore an array of movies categorized by genre, director, language, and era, including specialized sections like Director's Spotlight and award-winning films.
    • +
  • Dynamic Movie Display: Experience a responsive movie display, adapting to various screen sizes, ensuring an optimal browsing experience.
    • +
  • Director’s Spotlight: Discover the masterpieces of legendary directors, updated hourly, highlighting their contribution to cinema.
    • +
  • Global Cinema: Dive deep into the diverse world of international cinema, with dedicated sections for Korean, Vietnamese, and other regional movies.
    • +
  • Interactive Discussions and Trivia: Participate in movie discussions and trivia games, enhancing community engagement and knowledge sharing.
    • +
  • Personalized User Experience: Save your favorite movies, write reviews, and get recommendations tailored to your taste.
    • +
  • Advanced Filtering: Find your next favorite movie with ease using our advanced filtering options based on year, rating, and more.
    • +
  • Real-Time Movie Trends: Stay updated with real-time trends in the movie industry, featuring trending movies and up-to-date ratings.
    • +
  • High-Quality Movie Trailers: Watch the latest trailers in high quality, providing a sneak peek into the movies you're interested in.
    • +
  • Director and Actor Insights: Delve into the careers of your favorite directors and actors, with dedicated pages detailing their filmography and impact on cinema.
    • +
  • Interactive Movie Details: Explore in-depth movie details, including behind-the-scenes facts, making-of stories, and exclusive interviews.
    • +
  • Community Driven Recommendations: Get movie recommendations based on community ratings and reviews, tailored to your preferences and viewing history.
    • +
  • Seamless User Interface: Enjoy an intuitive and user-friendly interface that makes navigating through the vast collection of movies effortless and enjoyable.
    • +
  • Regular Updates and Features: Experience constantly updated content and new features, ensuring a fresh and dynamic user experience every time you visit.
    • +
-

Our Mission:

-

At The MovieVerse, we are driven by a passion for cinema and a commitment to providing a comprehensive, engaging, and user-friendly platform for exploring movies. Our mission is to create a space where film lovers can discover, discuss, and delve into the world of movies.

+

Our Vision:

+

Our aim is to create a haven for cinephiles, where the discovery of movies is an adventure. The MovieVerse is more than just a movie database; it's a vibrant community and a hub for sharing cinematic experiences and insights.

-

Future Developments:

-

We're constantly evolving, with exciting features and improvements on the horizon. Our roadmap includes augmented reality experiences, personalized movie journeys, and enhanced social sharing capabilities.

-
-

We invite you to be part of The MovieVerse journey. Your feedback and suggestions are not just welcomed but essential in shaping the future of this platform. Join us in celebrating the art of cinema.

-
-

Thank you for visiting The MovieVerse. For feedback and more information, please visit my GitHub page.

-
+

Join The Journey:

+

We're constantly innovating to bring you new and exciting features. Stay tuned for upcoming enhancements, including virtual reality experiences, AI-driven recommendations, and social integration for shared movie experiences.

+
+

Become a part of The MovieVerse community today. Your engagement and feedback are invaluable to us. Together, let's celebrate the wonder of movies!

+
+

Thank you for being a part of The MovieVerse. For more insights and updates, connect with us on our GitHub page.

+
- diff --git a/actor-details.html b/actor-details.html index add84e03..f1b9adbe 100644 --- a/actor-details.html +++ b/actor-details.html @@ -50,7 +50,6 @@

- diff --git a/actor-details.js b/actor-details.js index 6433fe87..a775196f 100644 --- a/actor-details.js +++ b/actor-details.js @@ -48,14 +48,53 @@ searchButton.addEventListener('click', (e) => { } }); +function calculateMoviesToDisplay() { + const screenWidth = window.innerWidth; + if (screenWidth <= 689.9) return 10; + if (screenWidth <= 1021.24) return 20; + if (screenWidth <= 1353.74) return 21; + if (screenWidth <= 1684.9) return 20; + if (screenWidth <= 2017.49) return 20; + if (screenWidth <= 2349.99) return 18; + if (screenWidth <= 2681.99) return 21; + if (screenWidth <= 3014.49) return 24; + if (screenWidth <= 3345.99) return 27; + if (screenWidth <= 3677.99) return 20; + if (screenWidth <= 4009.99) return 22; + if (screenWidth <= 4340.99) return 24; + if (screenWidth <= 4673.49) return 26; + if (screenWidth <= 5005.99) return 28; + if (screenWidth <= 5337.99) return 30; + if (screenWidth <= 5669.99) return 32; + if (screenWidth <= 6001.99) return 34; + if (screenWidth <= 6333.99) return 36; + if (screenWidth <= 6665.99) return 38; + if (screenWidth <= 6997.99) return 40; + if (screenWidth <= 7329.99) return 42; + if (screenWidth <= 7661.99) return 44; + if (screenWidth <= 7993.99) return 46; + if (screenWidth <= 8325.99) return 48; + return 20; +} + async function getMovies(url) { clearMovieDetails(); + const numberOfMovies = calculateMoviesToDisplay(); + const pagesToFetch = numberOfMovies <= 20 ? 1 : 2; + let allMovies = []; + + for (let page = 1; page <= pagesToFetch; page++) { + const response = await fetch(`${url}&page=${page}`); + const data = await response.json(); + allMovies = allMovies.concat(data.results); + } - const resp = await fetch(url); - const respData = await resp.json(); + // Sort movies by vote_average in descending order + allMovies.sort((a, b) => b.vote_average - a.vote_average); - if (respData.results.length > 0) { - showMovies(respData.results); + // Display the sorted movies + if (allMovies.length > 0) { + showMovies(allMovies.slice(0, numberOfMovies)); } else { main.innerHTML = `

No movie with the specified search term found. Please try again.

`; @@ -67,12 +106,18 @@ function showMovies(movies){ movies.forEach((movie) => { const { id, poster_path, title, vote_average, overview } = movie; const movieE1 = document.createElement('div'); + const voteAverage = vote_average.toFixed(1); movieE1.classList.add('movie'); + + const movieImage = poster_path + ? `${title}` + : `
Image Not Available
`; + movieE1.innerHTML = ` - ${title} + ${movieImage}

${title}

- ${vote_average} + ${voteAverage}

Movie Overview:

@@ -139,13 +184,15 @@ function populateActorDetails(actor, credits) { if (actor.profile_path) { actorImage.src = `https://image.tmdb.org/t/p/w1280${actor.profile_path}`; actorName.textContent = actor.name; - } else { - actorImage.style.display = 'none'; // Hide the image element + document.title = `${actor.name} - Actor's Details`; + } + else { + actorImage.style.display = 'none'; actorName.textContent = actor.name; const noImageText = document.createElement('h2'); noImageText.textContent = 'Image Not Available'; noImageText.style.textAlign = 'center'; - document.querySelector('.actor-left').appendChild(noImageText); // Append this message in the left section + document.querySelector('.actor-left').appendChild(noImageText); } document.getElementById('actor-image').src = `https://image.tmdb.org/t/p/w1280${actor.profile_path}`; document.getElementById('actor-name').textContent = actor.name; @@ -153,6 +200,7 @@ function populateActorDetails(actor, credits) { actorDescription.innerHTML = `

Biography: ${actor.biography || 'N/A'}

Date of Birth: ${actor.birthday || 'N/A'}

+

Age: ${actor.birthday ? calculateAge(actor.birthday) : 'N/A'}

Place of Birth: ${actor.place_of_birth || 'N/A'}

Known For: ${actor.known_for_department || 'N/A'}

Height: ${actor.height || 'N/A'}

@@ -211,3 +259,9 @@ async function showMovieOfTheDay(){ } } + +function calculateAge(birthday) { + const birthDate = new Date(birthday); + const currentDate = new Date(); + return currentDate.getFullYear() - birthDate.getFullYear(); +} \ No newline at end of file diff --git a/app.js b/app.js index 2808c293..348ff623 100644 --- a/app.js +++ b/app.js @@ -135,7 +135,16 @@ function movieVerseResponse(message) { return "Looking for critically acclaimed cinema? Check our 'Award Winners' section for movies that have received major accolades!"; } else if (lowerMessage.includes("do you have classics from the 80s")) { return "Absolutely! The 80s were iconic. Dive into classics like 'E.T.', 'The Breakfast Club', or 'Back to the Future'. Ready for some nostalgia?"; - } else { + } else if (lowerMessage.includes("movie suggestions based on genre")) { + return "Sure! Let me know your favorite genre, and I'll suggest a movie accordingly!"; + } else if (lowerMessage.includes("movie suggestions based on actor")) { + return "Of course! Let me know your favorite actor, and I'll suggest a movie accordingly!"; + } else if (lowerMessage.includes("movie suggestions based on director")) { + return "Of course! Let me know your favorite director, and I'll suggest a movie accordingly!"; + } else if (lowerMessage.includes("movie suggestions based on year")) { + return "Of course! Let me know your favorite year, and I'll suggest a movie accordingly!"; + } + else { return "Sorry, I didn't catch that. Can you rephrase or ask another question about movies?"; } } diff --git a/director-details.html b/director-details.html new file mode 100644 index 00000000..54f276ba --- /dev/null +++ b/director-details.html @@ -0,0 +1,62 @@ + + + + + Director Details + + + + + + +
+

+ The MovieVerse +

+ + + +
+ + +
+
+ +
+

+
+ +
+ +
+ +
+ +
+

+ director Image +
+ + +
+ +
+
+ + + + + + + + + + + + + diff --git a/director-details.js b/director-details.js new file mode 100644 index 00000000..0bbad5f8 --- /dev/null +++ b/director-details.js @@ -0,0 +1,232 @@ +const search = document.getElementById("search"); +const searchButton = document.getElementById("button-search"); +const form = document.getElementById("form"); +const SEARCHPATH = "https://api.themoviedb.org/3/search/movie?&api_key=c5a20c861acf7bb8d9e987dcc7f1b558&query="; +const main = document.getElementById("main"); +const IMGPATH = "https://image.tmdb.org/t/p/w1280"; +const searchTitle = document.getElementById("search-title"); + +function getClassByRate(vote){ + if (vote >= 8) { + return 'green'; + } + else if (vote >= 5) { + return 'orange'; + } + else { + return 'red'; + } +} + +form.addEventListener('submit', (e) => { + e.preventDefault(); + const searchTerm = search.value.trim(); + + if (searchTerm) { + getMovies(SEARCHPATH + searchTerm); + searchTitle.innerHTML = 'Search Results for: ' + searchTerm; + otherTitle.innerHTML = 'Check out other movies:'; + search.value = ''; + } + else { + searchTitle.innerHTML = 'Please enter a search term.'; + } +}); + +searchButton.addEventListener('click', (e) => { + e.preventDefault(); + const searchTerm = search.value; + + if (searchTerm) { + getMovies(SEARCHPATH + searchTerm); + searchTitle.innerHTML = 'Search Results for: ' + searchTerm; + otherTitle.innerHTML = 'Check out other movies:'; + search.value = ''; + } + else { + searchTitle.innerHTML = 'Please enter a search term.'; + } +}); + +function calculateMoviesToDisplay() { + const screenWidth = window.innerWidth; + if (screenWidth <= 689.9) return 10; + if (screenWidth <= 1021.24) return 20; + if (screenWidth <= 1353.74) return 21; + if (screenWidth <= 1684.9) return 20; + if (screenWidth <= 2017.49) return 20; + if (screenWidth <= 2349.99) return 18; + if (screenWidth <= 2681.99) return 21; + if (screenWidth <= 3014.49) return 24; + if (screenWidth <= 3345.99) return 27; + if (screenWidth <= 3677.99) return 20; + if (screenWidth <= 4009.99) return 22; + if (screenWidth <= 4340.99) return 24; + if (screenWidth <= 4673.49) return 26; + if (screenWidth <= 5005.99) return 28; + if (screenWidth <= 5337.99) return 30; + if (screenWidth <= 5669.99) return 32; + if (screenWidth <= 6001.99) return 34; + if (screenWidth <= 6333.99) return 36; + if (screenWidth <= 6665.99) return 38; + if (screenWidth <= 6997.99) return 40; + if (screenWidth <= 7329.99) return 42; + if (screenWidth <= 7661.99) return 44; + if (screenWidth <= 7993.99) return 46; + if (screenWidth <= 8325.99) return 48; + return 20; +} + +async function getMovies(url) { + clearMovieDetails(); + const numberOfMovies = calculateMoviesToDisplay(); + const pagesToFetch = numberOfMovies <= 20 ? 1 : 2; + let allMovies = []; + + for (let page = 1; page <= pagesToFetch; page++) { + const response = await fetch(`${url}&page=${page}`); + const data = await response.json(); + allMovies = allMovies.concat(data.results); + } + + // Sort movies by vote_average in descending order + allMovies.sort((a, b) => b.vote_average - a.vote_average); + + // Display the sorted movies + if (allMovies.length > 0) { + showMovies(allMovies.slice(0, numberOfMovies)); + } + else { + main.innerHTML = `

No movie with the specified search term found. Please try again.

`; + } +} + +function showMovies(movies){ + main.innerHTML = ''; + movies.forEach((movie) => { + const { id, poster_path, title, vote_average, overview } = movie; + const movieE1 = document.createElement('div'); + const voteAverage = vote_average.toFixed(1); + movieE1.classList.add('movie'); + + const movieImage = poster_path + ? `${title}` + : `
Image Not Available
`; + + movieE1.innerHTML = ` + ${movieImage} +
+

${title}

+ ${voteAverage} +
+
+

Movie Overview:

+ ${overview} +
`; + + movieE1.addEventListener('click', () => { + localStorage.setItem('selectedMovieId', id); // Store the movie ID + window.location.href = 'movie-details.html'; + }); + + main.appendChild(movieE1); + }); +} + +function clearMovieDetails() { + const movieDetailsContainer = document.getElementById('director-details-container'); + if (movieDetailsContainer) { + movieDetailsContainer.innerHTML = ''; + } +} + +document.addEventListener('DOMContentLoaded', () => { + const directorId = localStorage.getItem('selectedDirectorId'); + if (directorId) { + fetchDirectorDetails(directorId); + } + else { + document.getElementById('director-details-container').innerHTML = '

Director details not found.

'; + } +}); + +async function fetchDirectorDetails(directorId) { + const directorUrl = `https://api.themoviedb.org/3/person/${directorId}?api_key=c5a20c861acf7bb8d9e987dcc7f1b558`; + const creditsUrl = `https://api.themoviedb.org/3/person/${directorId}/movie_credits?api_key=c5a20c861acf7bb8d9e987dcc7f1b558`; + + try { + const [directorResponse, creditsResponse] = await Promise.all([ + fetch(directorUrl), + fetch(creditsUrl) + ]); + + const director = await directorResponse.json(); + const credits = await creditsResponse.json(); + + if (director.success === false) { + document.getElementById('director-details-container').innerHTML = '

No Information is Available for this Director

'; + } + else { + populateDirectorDetails(director, credits); + } + } + catch (error) { + console.error('Error fetching director details:', error); + document.getElementById('director-details-container').innerHTML = '

Error fetching director details

'; + } +} + +function populateDirectorDetails(director, credits) { + const directorImage = document.getElementById('director-image'); + const directorName = document.getElementById('director-name'); + const directorDescription = document.getElementById('director-description'); + + if (director.profile_path) { + directorImage.src = `https://image.tmdb.org/t/p/w1280${director.profile_path}`; + directorName.textContent = director.name; + document.title = `${director.name} - Director's Details`; + } + else { + directorImage.style.display = 'none'; + directorName.textContent = director.name; + const noImageText = document.createElement('h2'); + noImageText.textContent = 'Image Not Available'; + noImageText.style.textAlign = 'center'; + document.querySelector('.director-left').appendChild(noImageText); + } + + directorDescription.innerHTML = ` +

Biography: ${director.biography || 'N/A'}

+

Date of Birth: ${director.birthday || 'N/A'}

+

Age: ${director.birthday ? calculateAge(director.birthday) : 'N/A'}

+

Place of Birth: ${director.place_of_birth || 'N/A'}

+

Known For: Directing

+ `; + const filmographyHeading = document.createElement('p'); + filmographyHeading.innerHTML = 'Filmography: '; + directorDescription.appendChild(filmographyHeading); + + const movieList = document.createElement('div'); + movieList.classList.add('movie-list'); + credits.crew.forEach(movie => { + if (movie.job === "Director") { + const movieLink = document.createElement('span'); + movieLink.textContent = movie.title; + movieLink.classList.add('movie-link'); + movieLink.addEventListener('click', () => { + localStorage.setItem('selectedMovieId', movie.id); + window.location.href = 'movie-details.html'; + }); + movieList.appendChild(movieLink); + movieList.appendChild(document.createTextNode(', ')); + } + }); + filmographyHeading.appendChild(movieList); +} + +function calculateAge(dob) { + const date = new Date(dob); + const ageDifMs = Date.now() - date.getTime(); + const ageDate = new Date(ageDifMs); + return Math.abs(ageDate.getUTCFullYear() - 1970); +} diff --git a/index.html b/index.html index f820f778..03f40344 100644 --- a/index.html +++ b/index.html @@ -63,8 +63,12 @@

@@ -90,9 +95,41 @@

Most Popular:

+ +
+

+
+ + +
+

Award-Winning Movies:

+
+ + +
+ +
+ +
+

Director's Spotlight: Alfred Hitchcock

+ +
+ +
+ + +
+

Hidden Gems:

+
+ + +
+ +
+
-

Trending New ACTION Movies:

+

Trending ACTION Movies:

@@ -102,7 +139,7 @@

Trending New ACTION Movies:

-

Trending New HORROR Movies:

+

Trending HORROR Movies:

@@ -110,9 +147,18 @@

Trending New HORROR Movies:

+ +
+

Best KOREAN Movies:

+
+ +
+ +
+
-

Trending New DOCUMENTARY Movies:

+

Trending DOCUMENTARY Movies:

@@ -122,7 +168,7 @@

Trending New DOCUMENTARY Movies: <
-

Trending New ANIMATED Movies:

+

Trending ANIMATED Movies:

@@ -132,7 +178,7 @@

Trending New ANIMATED Movies:

-

Trending New TVSERIES:

+

Trending TVSERIES:

@@ -142,7 +188,7 @@

Trending New TVSERIES:

-

Trending New SCIENCE FICTION Movies:

+

Trending SCIENCE FICTION Movies:

@@ -152,7 +198,7 @@

Trending New SCIENCE FICTION Movie
-

Trending New ROMANTIC Movies:

+

Trending ROMANTIC Movies:

@@ -162,7 +208,7 @@

Trending New ROMANTIC Movies:

-

Trending New THRILLER Movies:

+

Trending THRILLER Movies:

@@ -172,7 +218,7 @@

Trending New THRILLER Movies:

-

Trending New MYSTERY Movies:

+

Trending MYSTERY Movies:

@@ -182,7 +228,7 @@

Trending New MYSTERY Movies:

-

Trending New ADVENTURE Movies:

+

Trending ADVENTURE Movies:

@@ -192,7 +238,7 @@

Trending New ADVENTURE Movies:
-

Trending New COMEDY Movies:

+

Trending COMEDY Movies:

@@ -202,7 +248,7 @@

Trending New COMEDY Movies:

-

Trending New FANTASY Movies:

+

Trending FANTASY Movies:

@@ -212,7 +258,7 @@

Trending New FANTASY Movies:

-

Trending New FAMILY Movies:

+

Trending FAMILY Movies:

@@ -222,7 +268,7 @@

Trending New FAMILY Movies:

-

Trending New CRIME Movies:

+

Trending CRIME Movies:

@@ -230,6 +276,16 @@

Trending New CRIME Movies:

+ +
+

Trending CLASSIC Movies:

+
+ + +
+ +
+ @@ -242,15 +298,6 @@

Trending New CRIME Movies:

- - diff --git a/movie-details.js b/movie-details.js index 43ff3fef..0d3192f1 100644 --- a/movie-details.js +++ b/movie-details.js @@ -49,14 +49,53 @@ searchButton.addEventListener('click', (e) => { } }); +function calculateMoviesToDisplay() { + const screenWidth = window.innerWidth; + if (screenWidth <= 689.9) return 10; + if (screenWidth <= 1021.24) return 20; + if (screenWidth <= 1353.74) return 21; + if (screenWidth <= 1684.9) return 20; + if (screenWidth <= 2017.49) return 20; + if (screenWidth <= 2349.99) return 18; + if (screenWidth <= 2681.99) return 21; + if (screenWidth <= 3014.49) return 24; + if (screenWidth <= 3345.99) return 27; + if (screenWidth <= 3677.99) return 20; + if (screenWidth <= 4009.99) return 22; + if (screenWidth <= 4340.99) return 24; + if (screenWidth <= 4673.49) return 26; + if (screenWidth <= 5005.99) return 28; + if (screenWidth <= 5337.99) return 30; + if (screenWidth <= 5669.99) return 32; + if (screenWidth <= 6001.99) return 34; + if (screenWidth <= 6333.99) return 36; + if (screenWidth <= 6665.99) return 38; + if (screenWidth <= 6997.99) return 40; + if (screenWidth <= 7329.99) return 42; + if (screenWidth <= 7661.99) return 44; + if (screenWidth <= 7993.99) return 46; + if (screenWidth <= 8325.99) return 48; + return 20; +} + async function getMovies(url) { clearMovieDetails(); + const numberOfMovies = calculateMoviesToDisplay(); + const pagesToFetch = numberOfMovies <= 20 ? 1 : 2; + let allMovies = []; + + for (let page = 1; page <= pagesToFetch; page++) { + const response = await fetch(`${url}&page=${page}`); + const data = await response.json(); + allMovies = allMovies.concat(data.results); + } - const resp = await fetch(url); - const respData = await resp.json(); + // Sort movies by vote_average in descending order + allMovies.sort((a, b) => b.vote_average - a.vote_average); - if (respData.results.length > 0) { - showMovies(respData.results); + // Display the sorted movies + if (allMovies.length > 0) { + showMovies(allMovies.slice(0, numberOfMovies)); } else { main.innerHTML = `

No movie with the specified search term found. Please try again.

`; @@ -75,12 +114,18 @@ function showMovies(movies){ movies.forEach((movie) => { const { id, poster_path, title, vote_average, overview } = movie; const movieE1 = document.createElement('div'); + const voteAverage = vote_average.toFixed(1); movieE1.classList.add('movie'); + + const movieImage = poster_path + ? `${title}` + : `
Image Not Available
`; + movieE1.innerHTML = ` - ${title} + ${movieImage}

${title}

- ${vote_average} + ${voteAverage}

Movie Overview:

@@ -124,33 +169,6 @@ async function fetchMovieDetails(movieId) { const trailerUrl = `https://www.youtube.com/watch?v=${trailers[0].key}`; createTrailerButton(trailerUrl); } - // Display the cast - const castHeading = document.createElement('p'); - castHeading.innerHTML = 'Cast: '; - document.getElementById('movie-description').appendChild(castHeading); - - if (movie.credits && movie.credits.cast.length > 0) { - const topTenCast = movie.credits.cast.slice(0, 10); // Get only the first 10 actors - topTenCast.forEach((actor, index) => { - const actorLink = document.createElement('span'); - actorLink.textContent = actor.name; - actorLink.classList.add('actor-link'); // Add class for styling - actorLink.addEventListener('click', () => { - localStorage.setItem('selectedActorId', actor.id); - window.location.href = 'actor-details.html'; - }); - - castHeading.appendChild(actorLink); - - // Add a comma after each actor name except the last one - if (index < topTenCast.length - 1) { - castHeading.appendChild(document.createTextNode(', ')); - } - }); - } - else { - castHeading.appendChild(document.createTextNode('None available.')); - } } catch (error) { console.error('Error fetching movie details:', error); @@ -199,6 +217,24 @@ function populateMovieDetails(movie) { // document.getElementById('movie-description').textContent = movie.overview; document.getElementById('movie-rating').textContent = `IMDB Rating: ${movieRating}`; document.title = movie.title + " - Movie Details"; + + const movieImage = document.getElementById('movie-image'); + const movieTitle = document.getElementById('movie-title'); + const movieDescription = document.getElementById('movie-description'); + + if (movie.poster_path) { + movieImage.src = IMGPATH + movie.poster_path; + movieImage.alt = movie.title; + } + else { + // Hide the image element and show a message + movieImage.style.display = 'none'; + const noImageText = document.createElement('h2'); + noImageText.textContent = 'Image Not Available'; + noImageText.style.textAlign = 'center'; + document.querySelector('.movie-left').appendChild(noImageText); // Append this message in the left section + } + const overview = movie.overview; const genres = movie.genres.map(genre => genre.name).join(', '); const releaseDate = movie.release_date; @@ -236,9 +272,52 @@ function populateMovieDetails(movie) {

Popularity Score: ${popularityScore}

Status: ${status}

User Score: ${userScore} (based on ${voteCount} votes)

-

Keywords: ${keywords}

`; + if (movie.credits && movie.credits.crew) { + const director = movie.credits.crew.find(member => member.job === 'Director'); + if (director) { + const directorAge = director.birthday ? calculateAge(director.birthday) : 'N/A'; + const directorElement = document.createElement('p'); + directorElement.innerHTML = `Director: ${director.name}`; + directorElement.querySelector('.director-link').addEventListener('click', (e) => { + e.preventDefault(); + localStorage.setItem('selectedDirectorId', director.id); + document.title = `${director.name} - Director's Details`; + window.location.href = 'director-details.html'; + }); + document.getElementById('movie-description').appendChild(directorElement); + } + } + + // Display the cast + const castHeading = document.createElement('p'); + castHeading.innerHTML = 'Cast: '; + document.getElementById('movie-description').appendChild(castHeading); + + if (movie.credits && movie.credits.cast.length > 0) { + const topTenCast = movie.credits.cast.slice(0, 10); // Get only the first 10 actors + topTenCast.forEach((actor, index) => { + const actorLink = document.createElement('span'); + actorLink.textContent = actor.name; + actorLink.classList.add('actor-link'); // Add class for styling + actorLink.addEventListener('click', () => { + localStorage.setItem('selectedActorId', actor.id); + window.location.href = 'actor-details.html'; + }); + + castHeading.appendChild(actorLink); + + // Add a comma after each actor name except the last one + if (index < topTenCast.length - 1) { + castHeading.appendChild(document.createTextNode(', ')); + } + }); + } + else { + castHeading.appendChild(document.createTextNode('None available.')); + } + const similarMoviesHeading = document.createElement('p'); similarMoviesHeading.innerHTML = 'Similar Movies: '; document.getElementById('movie-description').appendChild(similarMoviesHeading); @@ -272,9 +351,12 @@ function populateMovieDetails(movie) { else { similarMoviesHeading.appendChild(document.createTextNode('None available.')); } + // Keywords + const keywordsElement = document.createElement('p'); + keywordsElement.innerHTML = `Keywords: ${keywords}`; + movieDescription.appendChild(keywordsElement); updateFavoriteButton(movie.id); favoriteButton.addEventListener('click', () => toggleFavorite(movie)); - } async function showMovieOfTheDay(){ diff --git a/script.js b/script.js index 79f303f9..29454c14 100644 --- a/script.js +++ b/script.js @@ -18,14 +18,25 @@ const form = document.getElementById("form"); const search = document.getElementById("search"); const searchButton = document.getElementById("button-search"); const searchTitle = document.getElementById("search-title"); -const otherTitle = document.getElementById("other"); +const otherTitle = document.getElementById("other1"); async function getMovies(url) { - const resp = await fetch(url); - const respData = await resp.json(); + const numberOfMovies = calculateMoviesToDisplay(); + const pagesToFetch = numberOfMovies <= 20 ? 1 : 2; + let allMovies = []; - if (respData.results.length > 0) { - showMovies(respData.results); + for (let page = 1; page <= pagesToFetch; page++) { + const response = await fetch(`${url}&page=${page}`); + const data = await response.json(); + allMovies = allMovies.concat(data.results); + } + + // Sort movies by vote_average in descending order + allMovies.sort((a, b) => b.vote_average - a.vote_average); + + // Display the sorted movies + if (allMovies.length > 0) { + showMovies(allMovies.slice(0, numberOfMovies)); } else { main.innerHTML = `

No movie with the specified search term found. Please try again.

`; @@ -52,21 +63,55 @@ async function showMovieOfTheDay() { } } +function calculateMoviesToDisplay() { + const screenWidth = window.innerWidth; + if (screenWidth <= 689.9) return 10; // 1 movie per row + if (screenWidth <= 1021.24) return 20; // 2 movies per row + if (screenWidth <= 1353.74) return 21; // 3 movies per row + if (screenWidth <= 1684.9) return 20; // 4 movies per row + if (screenWidth <= 2017.49) return 20; // 5 movies per row + if (screenWidth <= 2349.99) return 18; // 6 movies per row + if (screenWidth <= 2681.99) return 21; // 7 movies per row + if (screenWidth <= 3014.49) return 24; // 8 movies per row + if (screenWidth <= 3345.99) return 27; // 9 movies per row + if (screenWidth <= 3677.99) return 20; // 10 movies per row + if (screenWidth <= 4009.99) return 22; // 11 movies per row + if (screenWidth <= 4340.99) return 24; // 12 movies per row + if (screenWidth <= 4673.49) return 26; // 13 movies per row + if (screenWidth <= 5005.99) return 28; // 14 movies per row + if (screenWidth <= 5337.99) return 30; // 15 movies per row + if (screenWidth <= 5669.99) return 32; // 16 movies per row + if (screenWidth <= 6001.99) return 34; // 17 movies per row + if (screenWidth <= 6333.99) return 36; // 18 movies per row + if (screenWidth <= 6665.99) return 38; // 19 movies per row + if (screenWidth <= 6997.99) return 40; // 20 movies per row + if (screenWidth <= 7329.99) return 42; // 21 movies per row + if (screenWidth <= 7661.99) return 44; // 22 movies per row + if (screenWidth <= 7993.99) return 46; // 23 movies per row + if (screenWidth <= 8325.99) return 48; // 24 movies per row + return 20; +} + function showMovies(movies) { main.innerHTML = ''; movies.forEach((movie) => { const { id, poster_path, title, vote_average, overview } = movie; const movieE1 = document.createElement('div'); movieE1.classList.add('movie'); + + const movieImage = poster_path + ? `${title}` + : `
Image Not Available
`; + voteAvg = vote_average.toFixed(1); movieE1.innerHTML = ` - ${title} + ${movieImage}

${title}

${voteAvg}
-

Movie Overview:

+

Movie Intro:

${overview}
`; @@ -79,7 +124,11 @@ function showMovies(movies) { }); } -function getClassByRate(vote) { +window.addEventListener('resize', () => { + getMovies(DATABASEURL); +}); + +function getClassByRate(vote){ if (vote >= 8) { return 'green'; } @@ -98,7 +147,7 @@ form.addEventListener('submit', (e) => { if (searchTerm) { getMovies(SEARCHPATH + searchTerm); searchTitle.innerHTML = 'Search Results for: ' + searchTerm; - otherTitle.innerHTML = 'Check out other movies:'; + otherTitle.innerHTML = 'Check out other movies, too:'; search.value = ''; } else { @@ -124,30 +173,40 @@ searchButton.addEventListener('click', (e) => { const DATABASEURL = "https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=c5a20c861acf7bb8d9e987dcc7f1b558&page=1"; const IMGPATH = "https://image.tmdb.org/t/p/w1280"; const SEARCHPATH = "https://api.themoviedb.org/3/search/movie?&api_key=c5a20c861acf7bb8d9e987dcc7f1b558&query="; -const ACTIONpath = "https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&with_genres=28"; -const HORRORpath = "https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&with_genres=27"; -const DOCUMENTARYRpath = "https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&with_genres=99"; -const ANIMATIONpath = "https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&with_genres=16"; -const SCIFIpath = "https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&with_genres=878"; -const ROMANTICpath = "https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&with_genres=10749"; -const THRILLERpath = "https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&with_genres=53"; -const MYSTERYpath = "https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&with_genres=9648"; -const ADVENTUREpath = "https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&with_genres=12"; -const COMEDYpath = "https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&with_genres=35"; -const FANTASYpath = "https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&with_genres=14"; -const FAMILYpath = "https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&with_genres=10751"; -const TVpath = "https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&with_genres=10770"; -const CRIMEpath = "https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&with_genres=80"; +const ACTIONpath = "https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&with_genres=28&sort_by=popularity.desc&vote_count.gte=8"; +const HORRORpath = "https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&with_genres=27&sort_by=popularity.desc&vote_count.gte=8"; +const DOCUMENTARYRpath = "https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&with_genres=99&sort_by=popularity.desc&vote_count.gte=8"; +const ANIMATIONpath = "https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&with_genres=16&sort_by=popularity.desc&vote_count.gte=8"; +const SCIFIpath = "https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&with_genres=878&sort_by=popularity.desc&vote_count.gte=8"; +const ROMANTICpath = "https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&with_genres=10749&sort_by=popularity.desc&vote_count.gte=8"; +const THRILLERpath = "https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&with_genres=53&sort_by=popularity.desc&vote_count.gte=8"; +const MYSTERYpath = "https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&with_genres=9648&sort_by=popularity.desc&vote_count.gte=8"; +const ADVENTUREpath = "https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&with_genres=12&sort_by=popularity.desc&vote_count.gte=8"; +const COMEDYpath = "https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&with_genres=35&sort_by=popularity.desc&vote_count.gte=8"; +const FANTASYpath = "https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&with_genres=14&sort_by=popularity.desc&vote_count.gte=8"; +const FAMILYpath = "https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&with_genres=10751&sort_by=popularity.desc&vote_count.gte=8"; +const TVpath = "https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&with_genres=10770&sort_by=popularity.desc&vote_count.gte=8"; +const CRIMEpath = "https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&with_genres=80&sort_by=popularity.desc&vote_count.gte=8"; getMovies(DATABASEURL); getMovies3(ACTIONpath); async function getMovies3(url) { - const resp = await fetch (url); + const numberOfMovies = calculateMoviesToDisplay(); + const pagesToFetch = numberOfMovies <= 20 ? 1 : 2; + const resp = await fetch(url); const respData = await resp.json(); + let allMovies = []; - showMovies3(respData.results); + if (respData.results.length > 0) { + for (let page = 1; page <= pagesToFetch; page++) { + const response = await fetch(`${url}&page=${page}`); + const data = await response.json(); + allMovies = allMovies.concat(data.results); + } + showMovies3(allMovies.slice(0, numberOfMovies)); + } } function showMovies3(movies) { @@ -179,10 +238,20 @@ function showMovies3(movies) { getMovies4(HORRORpath); async function getMovies4(url) { - const resp = await fetch (url); + const numberOfMovies = calculateMoviesToDisplay(); + const pagesToFetch = numberOfMovies <= 20 ? 1 : 2; + const resp = await fetch(url); const respData = await resp.json(); + let allMovies = []; - showMovies4(respData.results); + if (respData.results.length > 0) { + for (let page = 1; page <= pagesToFetch; page++) { + const response = await fetch(`${url}&page=${page}`); + const data = await response.json(); + allMovies = allMovies.concat(data.results); + } + showMovies4(allMovies.slice(0, numberOfMovies)); + } } function showMovies4(movies) { @@ -214,10 +283,20 @@ function showMovies4(movies) { getMovies5(DOCUMENTARYRpath); async function getMovies5(url) { - const resp = await fetch (url); + const numberOfMovies = calculateMoviesToDisplay(); + const pagesToFetch = numberOfMovies <= 20 ? 1 : 2; + const resp = await fetch(url); const respData = await resp.json(); + let allMovies = []; - showMovies5(respData.results); + if (respData.results.length > 0) { + for (let page = 1; page <= pagesToFetch; page++) { + const response = await fetch(`${url}&page=${page}`); + const data = await response.json(); + allMovies = allMovies.concat(data.results); + } + showMovies5(allMovies.slice(0, numberOfMovies)); + } } function showMovies5(movies) { @@ -249,10 +328,20 @@ function showMovies5(movies) { getMovies6(ANIMATIONpath); async function getMovies6(url) { - const resp = await fetch (url); + const numberOfMovies = calculateMoviesToDisplay(); + const pagesToFetch = numberOfMovies <= 20 ? 1 : 2; + const resp = await fetch(url); const respData = await resp.json(); + let allMovies = []; - showMovies6(respData.results); + if (respData.results.length > 0) { + for (let page = 1; page <= pagesToFetch; page++) { + const response = await fetch(`${url}&page=${page}`); + const data = await response.json(); + allMovies = allMovies.concat(data.results); + } + showMovies6(allMovies.slice(0, numberOfMovies)); + } } function showMovies6(movies) { @@ -284,10 +373,20 @@ function showMovies6(movies) { getMovies7(SCIFIpath); async function getMovies7(url) { - const resp = await fetch (url); + const numberOfMovies = calculateMoviesToDisplay(); + const pagesToFetch = numberOfMovies <= 20 ? 1 : 2; + const resp = await fetch(url); const respData = await resp.json(); + let allMovies = []; - showMovies7(respData.results); + if (respData.results.length > 0) { + for (let page = 1; page <= pagesToFetch; page++) { + const response = await fetch(`${url}&page=${page}`); + const data = await response.json(); + allMovies = allMovies.concat(data.results); + } + showMovies7(allMovies.slice(0, numberOfMovies)); + } } function showMovies7(movies) { @@ -320,10 +419,20 @@ function showMovies7(movies) { getMovies8(ROMANTICpath); async function getMovies8(url) { - const resp = await fetch (url); + const numberOfMovies = calculateMoviesToDisplay(); + const pagesToFetch = numberOfMovies <= 20 ? 1 : 2; + const resp = await fetch(url); const respData = await resp.json(); + let allMovies = []; - showMovies8(respData.results); + if (respData.results.length > 0) { + for (let page = 1; page <= pagesToFetch; page++) { + const response = await fetch(`${url}&page=${page}`); + const data = await response.json(); + allMovies = allMovies.concat(data.results); + } + showMovies8(allMovies.slice(0, numberOfMovies)); + } } function showMovies8(movies) { @@ -355,10 +464,20 @@ function showMovies8(movies) { getMovies9(THRILLERpath); async function getMovies9(url) { - const resp = await fetch (url); + const numberOfMovies = calculateMoviesToDisplay(); + const pagesToFetch = numberOfMovies <= 20 ? 1 : 2; + const resp = await fetch(url); const respData = await resp.json(); + let allMovies = []; - showMovies9(respData.results); + if (respData.results.length > 0) { + for (let page = 1; page <= pagesToFetch; page++) { + const response = await fetch(`${url}&page=${page}`); + const data = await response.json(); + allMovies = allMovies.concat(data.results); + } + showMovies9(allMovies.slice(0, numberOfMovies)); + } } function showMovies9(movies) { @@ -390,10 +509,20 @@ function showMovies9(movies) { getMovies10(MYSTERYpath); async function getMovies10(url) { - const resp = await fetch (url); + const numberOfMovies = calculateMoviesToDisplay(); + const pagesToFetch = numberOfMovies <= 20 ? 1 : 2; + const resp = await fetch(url); const respData = await resp.json(); + let allMovies = []; - showMovies10(respData.results); + if (respData.results.length > 0) { + for (let page = 1; page <= pagesToFetch; page++) { + const response = await fetch(`${url}&page=${page}`); + const data = await response.json(); + allMovies = allMovies.concat(data.results); + } + showMovies10(allMovies.slice(0, numberOfMovies)); + } } function showMovies10(movies) { @@ -425,10 +554,20 @@ function showMovies10(movies) { getMovies11(ADVENTUREpath); async function getMovies11(url) { - const resp = await fetch (url); + const numberOfMovies = calculateMoviesToDisplay(); + const pagesToFetch = numberOfMovies <= 20 ? 1 : 2; + const resp = await fetch(url); const respData = await resp.json(); + let allMovies = []; - showMovies11(respData.results); + if (respData.results.length > 0) { + for (let page = 1; page <= pagesToFetch; page++) { + const response = await fetch(`${url}&page=${page}`); + const data = await response.json(); + allMovies = allMovies.concat(data.results); + } + showMovies11(allMovies.slice(0, numberOfMovies)); + } } function showMovies11(movies) { @@ -460,10 +599,20 @@ function showMovies11(movies) { getMovies12(COMEDYpath); async function getMovies12(url) { - const resp = await fetch (url); + const numberOfMovies = calculateMoviesToDisplay(); + const pagesToFetch = numberOfMovies <= 20 ? 1 : 2; + const resp = await fetch(url); const respData = await resp.json(); + let allMovies = []; - showMovies12(respData.results); + if (respData.results.length > 0) { + for (let page = 1; page <= pagesToFetch; page++) { + const response = await fetch(`${url}&page=${page}`); + const data = await response.json(); + allMovies = allMovies.concat(data.results); + } + showMovies12(allMovies.slice(0, numberOfMovies)); + } } function showMovies12(movies) { @@ -495,10 +644,20 @@ function showMovies12(movies) { getMovies13(FANTASYpath); async function getMovies13(url) { - const resp = await fetch (url); + const numberOfMovies = calculateMoviesToDisplay(); + const pagesToFetch = numberOfMovies <= 20 ? 1 : 2; + const resp = await fetch(url); const respData = await resp.json(); + let allMovies = []; - showMovies13(respData.results); + if (respData.results.length > 0) { + for (let page = 1; page <= pagesToFetch; page++) { + const response = await fetch(`${url}&page=${page}`); + const data = await response.json(); + allMovies = allMovies.concat(data.results); + } + showMovies13(allMovies.slice(0, numberOfMovies)); + } } function showMovies13(movies) { @@ -530,10 +689,20 @@ function showMovies13(movies) { getMovies14(FAMILYpath); async function getMovies14(url) { - const resp = await fetch (url); + const numberOfMovies = calculateMoviesToDisplay(); + const pagesToFetch = numberOfMovies <= 20 ? 1 : 2; + const resp = await fetch(url); const respData = await resp.json(); + let allMovies = []; - showMovies14(respData.results); + if (respData.results.length > 0) { + for (let page = 1; page <= pagesToFetch; page++) { + const response = await fetch(`${url}&page=${page}`); + const data = await response.json(); + allMovies = allMovies.concat(data.results); + } + showMovies14(allMovies.slice(0, numberOfMovies)); + } } function showMovies14(movies) { @@ -565,10 +734,20 @@ function showMovies14(movies) { getMovies15(TVpath); async function getMovies15(url) { - const resp = await fetch (url); + const numberOfMovies = calculateMoviesToDisplay(); + const pagesToFetch = numberOfMovies <= 20 ? 1 : 2; + const resp = await fetch(url); const respData = await resp.json(); + let allMovies = []; - showMovies15(respData.results); + if (respData.results.length > 0) { + for (let page = 1; page <= pagesToFetch; page++) { + const response = await fetch(`${url}&page=${page}`); + const data = await response.json(); + allMovies = allMovies.concat(data.results); + } + showMovies15(allMovies.slice(0, numberOfMovies)); + } } function showMovies15(movies) { @@ -600,10 +779,20 @@ function showMovies15(movies) { getMovies16(CRIMEpath); async function getMovies16(url) { - const resp = await fetch (url); + const numberOfMovies = calculateMoviesToDisplay(); + const pagesToFetch = numberOfMovies <= 20 ? 1 : 2; + const resp = await fetch(url); const respData = await resp.json(); + let allMovies = []; - showMovies16(respData.results); + if (respData.results.length > 0) { + for (let page = 1; page <= pagesToFetch; page++) { + const response = await fetch(`${url}&page=${page}`); + const data = await response.json(); + allMovies = allMovies.concat(data.results); + } + showMovies16(allMovies.slice(0, numberOfMovies)); + } } function showMovies16(movies) { @@ -632,6 +821,201 @@ function showMovies16(movies) { }); } +const AWARD_WINNING_PATH = "https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&sort_by=vote_average.desc&vote_count.gte=1000"; +const main17 = document.getElementById('main17'); + +getMovies17(AWARD_WINNING_PATH); + +async function getMovies17(url) { + const numberOfMovies = calculateMoviesToDisplay(); + const pagesToFetch = numberOfMovies <= 20 ? 1 : 2; + const resp = await fetch(url); + const respData = await resp.json(); + let allMovies = []; + + if (respData.results.length > 0) { + for (let page = 1; page <= pagesToFetch; page++) { + const response = await fetch(`${url}&page=${page}`); + const data = await response.json(); + allMovies = allMovies.concat(data.results); + } + showMovies17(allMovies.slice(0, numberOfMovies)); + } +} + +function showMovies17(movies) { + main17.innerHTML = ' '; + movies.forEach((movie) => { + const { id, poster_path, title, vote_average, overview } = movie; + const movieE1 = document.createElement('div'); + movieE1.classList.add('movie'); + movieE1.innerHTML = ` + ${title} +
+

${title}

+ ${vote_average} +
+
+

Movie Intro:

+ ${overview} +
`; + + // Add a click event listener to each movie element + movieE1.addEventListener('click', () => { + localStorage.setItem('selectedMovieId', id); // Store the movie ID + window.location.href = 'movie-details.html'; + }); + main17.appendChild(movieE1); + }); +} + +const HIDDEN_GEMS_PATH = "https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&sort_by=vote_average.desc&vote_count.gte=100&vote_average.gte=7&popularity.lte=10"; +const main18 = document.getElementById('main18'); + +getMovies18(HIDDEN_GEMS_PATH); + +async function getMovies18(url) { + const numberOfMovies = calculateMoviesToDisplay(); + const pagesToFetch = numberOfMovies <= 20 ? 1 : 3; + const resp = await fetch(url); + const respData = await resp.json(); + let allMovies = []; + + if (respData.results.length > 1) { + for (let page = 1; page <= pagesToFetch; page++) { + const response = await fetch(`${url}&page=${page}`); + const data = await response.json(); + + allMovies = allMovies.concat(data.results); + } + showMovies18(allMovies.slice(0, numberOfMovies)); + } +} + +function showMovies18(movies) { + main18.innerHTML = ' '; + movies.forEach((movie) => { + const { id, poster_path, title, vote_average, overview } = movie; + const movieE1 = document.createElement('div'); + movieE1.classList.add('movie'); + movieE1.innerHTML = ` + ${title} +
+

${title}

+ ${vote_average} +
+
+

Movie Intro:

+ ${overview} +
`; + + // Add a click event listener to each movie element + movieE1.addEventListener('click', () => { + localStorage.setItem('selectedMovieId', id); // Store the movie ID + window.location.href = 'movie-details.html'; + }); + main18.appendChild(movieE1); + }); +} + +const CLASSIC_MOVIES_PATH = "https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&sort_by=popularity.desc&release_date.lte=1980"; +const main19 = document.getElementById('main19'); + +getMovies19(CLASSIC_MOVIES_PATH); + +async function getMovies19(url) { + const numberOfMovies = calculateMoviesToDisplay(); + const pagesToFetch = numberOfMovies <= 20 ? 1 : 3; + const resp = await fetch(url); + const respData = await resp.json(); + let allMovies = []; + + if (respData.results.length > 1) { + for (let page = 1; page <= pagesToFetch; page++) { + const response = await fetch(`${url}&page=${page}`); + const data = await response.json(); + + allMovies = allMovies.concat(data.results); + } + showMovies19(allMovies.slice(0, numberOfMovies)); + } +} + +function showMovies19(movies) { + main19.innerHTML = ' '; + movies.forEach((movie) => { + const { id, poster_path, title, vote_average, overview } = movie; + const movieE1 = document.createElement('div'); + movieE1.classList.add('movie'); + movieE1.innerHTML = ` + ${title} +
+

${title}

+ ${vote_average} +
+
+

Movie Intro:

+ ${overview} +
`; + + // Add a click event listener to each movie element + movieE1.addEventListener('click', () => { + localStorage.setItem('selectedMovieId', id); // Store the movie ID + window.location.href = 'movie-details.html'; + }); + main19.appendChild(movieE1); + }); +} + +const KOREAN_PATH = "https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&with_original_language=ko&sort_by=vote_average.desc,popularity.desc&vote_count.gte=10&vote_average.gte=8"; +const main21 = document.getElementById('main21'); + +getMovies21(KOREAN_PATH); + +async function getMovies21(url) { + const numberOfMovies = calculateMoviesToDisplay(); + const pagesToFetch = numberOfMovies <= 20 ? 1 : 3; + const resp = await fetch(url); + const respData = await resp.json(); + let allMovies = []; + + if (respData.results.length > 1) { + for (let page = 1; page <= pagesToFetch; page++) { + const response = await fetch(`${url}&page=${page}`); + const data = await response.json(); + + allMovies = allMovies.concat(data.results); + } + showMovies21(allMovies.slice(0, numberOfMovies)); + } +} + +function showMovies21(movies) { + main21.innerHTML = ' '; + movies.forEach((movie) => { + const { id, poster_path, title, vote_average, overview } = movie; + const movieE1 = document.createElement('div'); + movieE1.classList.add('movie'); + movieE1.innerHTML = ` + ${title} +
+

${title}

+ ${vote_average} +
+
+

Movie Intro:

+ ${overview} +
`; + + // Add a click event listener to each movie element + movieE1.addEventListener('click', () => { + localStorage.setItem('selectedMovieId', id); // Store the movie ID + window.location.href = 'movie-details.html'; + }); + main21.appendChild(movieE1); + }); +} + document.addEventListener('mousemove', function(event) { const sideNav = document.getElementById('side-nav'); if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) { @@ -672,3 +1056,106 @@ function removeNavBar() { } } +function scrollToTop() { + window.scrollTo({ + top: 0, + behavior: 'smooth' + }); +} + +const directors = [ + { name: "Alfred Hitchcock", id: "2636" }, + { name: "Steven Spielberg", id: "488" }, + { name: "Martin Scorsese", id: "1032" }, + { name: "Quentin Tarantino", id: "138" }, + { name: "Christopher Nolan", id: "525" }, + { name: "Stanley Kubrick", id: "976" }, + { name: "David Fincher", id: "7467" }, + { name: "James Cameron", id: "2710" }, + { name: "Francis Ford Coppola", id: "115" }, + { name: "Tim Burton", id: "510" }, + { name: "Ridley Scott", id: "578" }, + { name: "Joel Coen", id: "10544" }, + { name: "Clint Eastwood", id: "1571" }, + { name: "Spike Lee", id: "110" }, + { name: "Woody Allen", id: "1243" }, + { name: "Peter Jackson", id: "1392" }, + { name: "Oliver Stone", id: "1178" }, + { name: "David Lynch", id: "7470" }, + { name: "Roman Polanski", id: "119" }, + { name: "Wes Anderson", id: "565"}, + { name: "Sergio Leone", id: "1159" }, + { name: "Akira Kurosawa", id: "1911" }, + { name: "Federico Fellini", id: "490" }, + { name: "Ingmar Bergman", id: "52" }, + { name: "Billy Wilder", id: "711" }, + { name: "John Ford", id: "226" }, + { name: "Orson Welles", id: "336" }, + { name: "David Lean", id: "2449" }, + { name: "Fritz Lang", id: "24" }, + { name: "Frank Capra", id: "1487" }, + { name: "John Huston", id: "617" }, +]; + +let currentDirectorIndex = 0; +const main20 = document.getElementById('main20'); + +updateDirectorSpotlight(); + +function changeDirector() { + currentDirectorIndex = (currentDirectorIndex + 1) % directors.length; + updateDirectorSpotlight(); +} + +setInterval(updateDirectorSpotlight, 3600000); + +function calculateMoviesToDisplay2() { + const screenWidth = window.innerWidth; + // Assuming each movie takes equal width, calculate number of movies per row + const moviesPerRow = Math.floor(screenWidth / 342); // 342px per movie (width + margins) + return moviesPerRow * 2; // 2 rows +} + +function updateDirectorSpotlight() { + const director = directors[currentDirectorIndex]; + document.getElementById('spotlight-director-name').textContent = director.name; + const url = `https://api.themoviedb.org/3/discover/movie?api_key=c5a20c861acf7bb8d9e987dcc7f1b558&with_people=${director.id}&sort_by=popularity.desc&sort_by=vote_average.desc`; + getDirectorSpotlight(url); +} + +async function getDirectorSpotlight(url) { + const numberOfMovies = calculateMoviesToDisplay2(); + const resp = await fetch(url); + const respData = await resp.json(); + let allMovies = []; + + if (respData.results.length > 0) { + allMovies = respData.results.slice(0, numberOfMovies); + showMoviesDirectorSpotlight(allMovies); + } +} + +function showMoviesDirectorSpotlight(movies) { + main20.innerHTML = ' '; + movies.forEach((movie) => { + const { id, poster_path, title, vote_average, overview } = movie; + const movieE1 = document.createElement('div'); + movieE1.classList.add('movie'); + movieE1.innerHTML = ` + ${title} +
+

${title}

+ ${vote_average} +
+
+

Movie Intro:

+ ${overview} +
`; + + movieE1.addEventListener('click', () => { + localStorage.setItem('selectedMovieId', id); + window.location.href = 'movie-details.html'; + }); + main20.appendChild(movieE1); + }); +} diff --git a/style.css b/style.css index d1489e53..aef10451 100644 --- a/style.css +++ b/style.css @@ -221,6 +221,11 @@ header h1 { color: #ff8623; } +#other1:hover { + color: #f509d9; + transition: 0.1s linear; +} + #back-to-top-btn { position: fixed; bottom: 20px; @@ -364,6 +369,13 @@ h2:hover { margin: 20px; } +.director-left, .director-right { + display: flex; + flex-direction: column; + justify-content: flex-start; + margin: 20px; +} + #actor-name { text-align: center; align-self: center; @@ -389,6 +401,14 @@ h2:hover { overflow-y: auto; } +.director-left { + width: 33.3333%; + box-sizing: border-box; + align-items: center; + justify-content: center; + overflow-y: auto; +} + .movie-right { width: 66.6666%; padding: 10px; @@ -404,6 +424,14 @@ h2:hover { margin-top: 70px; } +.director-right { + width: 66.6666%; + padding: 10px; + box-sizing: border-box; + overflow-y: auto; + margin-top: 110px; +} + .movie-image { width: 100%; height: auto; @@ -438,6 +466,15 @@ h2:hover { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); } +.director-header { + text-align: center; + align-self: center; + font-size: 2.5rem; + font-weight: bold; + color: #ffeb3b; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); +} + .movie-description { font-size: 1rem; color: white; @@ -450,6 +487,12 @@ h2:hover { transform: translateY(10%); } +.director-description { + font-size: 1rem; + color: white; + transform: translateY(10%); +} + .movie-rating { margin-top: 100px; text-align: center; @@ -780,3 +823,34 @@ p { .movie-link:hover { color: #f509d9; } + +.genres { + display: flex; + justify-content: space-between; + align-items: center; +} + +#change-director-btn { + padding: 5px 10px; + cursor: pointer; + border: none; + background-color: #7378c5; + font: inherit; + color: #000000; + border-radius: 8px; + margin-right: 40px; +} + +#change-director-btn:hover { + background-color: #ff8623; +} + +.director-link { + cursor: pointer; + color: white; + text-decoration: underline; +} + +.director-link:hover { + color: #f509d9; +}