Skip to content

Commit

Permalink
Updated frontend logic
Browse files Browse the repository at this point in the history
  • Loading branch information
Son Nguyen committed Dec 18, 2023
1 parent f8c93c0 commit 9f8c1f7
Show file tree
Hide file tree
Showing 10 changed files with 1,203 additions and 150 deletions.
67 changes: 37 additions & 30 deletions about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,41 +8,48 @@
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<header>
<h1 class="my-heading" style="margin-top: 40px">The MovieVerse - About Us</h1>
<button class="back-btn" onclick="window.location.href='index.html'">Home</button>
<button class="about" onclick="window.location.href='about.html'">About</button>
<button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
<button id="discussions-btn" onclick="window.location.href='discussions.html'" style="margin-bottom: -39px" title="Want to know more about movies? Chat with our intelligent chatbot!">MovieVerse Chatbot</button>
<button id="trivia-btn" onclick="window.location.href='trivia.html'" style="margin-bottom: -40px" title="Play a quick trivia to test your knowledge about movies!">Trivia Game</button>
</header>
<header>
<h1 class="my-heading" style="margin-top: 40px">The MovieVerse - About Us</h1>
<button class="back-btn" onclick="window.location.href='index.html'">Home</button>
<button class="about" onclick="window.location.href='about.html'">About</button>
<button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
<button id="discussions-btn" onclick="window.location.href='discussions.html'" style="margin-bottom: -39px" title="Engage in movie discussions">MovieVerse Chatbot</button>
<button id="trivia-btn" onclick="window.location.href='trivia.html'" style="margin-bottom: -40px" title="Test your movie knowledge">Trivia Game</button>
</header>

<main id="main2">
<h2 style="align-self: center">About The MovieVerse</h2>
<main id="main2">
<h2 style="align-self: center">About The MovieVerse</h2>

<p style="color: white">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.</p>
<p style="color: white">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.</p>

<h3 style="color: #ff8623">Core Features:</h3>
<ul style="align-content: center; color: white">
<li><strong>Expansive Movie Catalog:</strong> Dive into an extensive collection of films, encompassing various genres, languages, and periods, showcasing the rich tapestry of global cinema.</li>
<li><strong>Intuitive Search Capabilities:</strong> Utilize advanced search options to navigate through the database seamlessly. Discover movies by keywords, actors, directors, or custom filters.</li>
<li><strong>Rich Movie Details:</strong> Each film in our catalog comes with detailed descriptions, including synopses, cast and crew information, ratings, and curated reviews.</li>
<li><strong>User Reviews and Ratings:</strong> Share your perspective with a community of movie buffs. Rate movies and write reviews to contribute to the collective wisdom of The MovieVerse.</li>
<li><strong>Interactive Features:</strong> Engage with features like "Movie of the Day," "Random Movie Fact," and personalized movie recommendations to enhance your discovery experience.</li>
<li><strong>Community Engagement:</strong> Connect with fellow cinephiles through forums, discussions, and trivia games. The MovieVerse is a community-driven platform encouraging interaction and sharing.</li>
</ul>
<h3 style="color: #ff8623">Core Features:</h3>
<ul style="align-content: center; color: white">
<li><strong>Curated Movie Collections:</strong> Explore an array of movies categorized by genre, director, language, and era, including specialized sections like Director's Spotlight and award-winning films.</li>
<li><strong>Dynamic Movie Display:</strong> Experience a responsive movie display, adapting to various screen sizes, ensuring an optimal browsing experience.</li>
<li><strong>Director’s Spotlight:</strong> Discover the masterpieces of legendary directors, updated hourly, highlighting their contribution to cinema.</li>
<li><strong>Global Cinema:</strong> Dive deep into the diverse world of international cinema, with dedicated sections for Korean, Vietnamese, and other regional movies.</li>
<li><strong>Interactive Discussions and Trivia:</strong> Participate in movie discussions and trivia games, enhancing community engagement and knowledge sharing.</li>
<li><strong>Personalized User Experience:</strong> Save your favorite movies, write reviews, and get recommendations tailored to your taste.</li>
<li><strong>Advanced Filtering:</strong> Find your next favorite movie with ease using our advanced filtering options based on year, rating, and more.</li>
<li><strong>Real-Time Movie Trends:</strong> Stay updated with real-time trends in the movie industry, featuring trending movies and up-to-date ratings.</li>
<li><strong>High-Quality Movie Trailers:</strong> Watch the latest trailers in high quality, providing a sneak peek into the movies you're interested in.</li>
<li><strong>Director and Actor Insights:</strong> Delve into the careers of your favorite directors and actors, with dedicated pages detailing their filmography and impact on cinema.</li>
<li><strong>Interactive Movie Details:</strong> Explore in-depth movie details, including behind-the-scenes facts, making-of stories, and exclusive interviews.</li>
<li><strong>Community Driven Recommendations:</strong> Get movie recommendations based on community ratings and reviews, tailored to your preferences and viewing history.</li>
<li><strong>Seamless User Interface:</strong> Enjoy an intuitive and user-friendly interface that makes navigating through the vast collection of movies effortless and enjoyable.</li>
<li><strong>Regular Updates and Features:</strong> Experience constantly updated content and new features, ensuring a fresh and dynamic user experience every time you visit.</li>
</ul>

<h3 style="color: #ff8623">Our Mission:</h3>
<p style="color: white">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.</p>
<h3 style="color: #ff8623">Our Vision:</h3>
<p style="color: white">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.</p>

<h3 style="color: #ff8623">Future Developments:</h3>
<p style="color: white">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.</p>
<br/>
<p style="color: white">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.</p>
<br/>
<p style="color: white"><em>Thank you for visiting The MovieVerse. For feedback and more information, please visit my <a href="https://github.com/hoangsonww/">GitHub page</a>.</em></p>
</main>
<h3 style="color: #ff8623">Join The Journey:</h3>
<p style="color: white">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.</p>
<br/>
<p style="color: white">Become a part of The MovieVerse community today. Your engagement and feedback are invaluable to us. Together, let's celebrate the wonder of movies!</p>
<br/>
<p style="color: white"><em>Thank you for being a part of The MovieVerse. For more insights and updates, connect with us on our <a href="https://github.com/hoangsonww/">GitHub page</a>.</em></p>
</main>

</body>

</html>
1 change: 0 additions & 1 deletion actor-details.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,6 @@ <h2 id="actor-name" class="actor-header"></h2>

<script src="actor-details.js"></script>

<!-- Add to your HTML where appropriate -->
<button id="movie-of-the-day-btn2" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!">Movie of the Day</button>

<!-- Create a button to go to the Movie Discussions page -->
Expand Down
72 changes: 63 additions & 9 deletions actor-details.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = `<p>No movie with the specified search term found. Please try again.</p>`;
Expand All @@ -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
? `<img src="${IMGPATH + poster_path}" alt="${title}" style="cursor: pointer;" />`
: `<div class="no-image" style="text-align: center; padding: 20px;">Image Not Available</div>`;

movieE1.innerHTML = `
<img src="${IMGPATH + poster_path}" alt="${title}" style="cursor: pointer;" />
${movieImage}
<div class="movie-info" style="cursor: pointer;">
<h3>${title}</h3>
<span class="${getClassByRate(vote_average)}">${vote_average}</span>
<span class="${getClassByRate(vote_average)}">${voteAverage}</span>
</div>
<div class="overview" style="cursor: pointer;">
<h4>Movie Overview: </h4>
Expand Down Expand Up @@ -139,20 +184,23 @@ 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;

actorDescription.innerHTML = `
<p><strong>Biography:</strong> ${actor.biography || 'N/A'}</p>
<p><strong>Date of Birth:</strong> ${actor.birthday || 'N/A'}</p>
<p><strong>Age:</strong> ${actor.birthday ? calculateAge(actor.birthday) : 'N/A'}</p>
<p><strong>Place of Birth:</strong> ${actor.place_of_birth || 'N/A'}</p>
<p><strong>Known For:</strong> ${actor.known_for_department || 'N/A'}</p>
<p><strong>Height:</strong> ${actor.height || 'N/A'}</p>
Expand Down Expand Up @@ -211,3 +259,9 @@ async function showMovieOfTheDay(){
}

}

function calculateAge(birthday) {
const birthDate = new Date(birthday);
const currentDate = new Date();
return currentDate.getFullYear() - birthDate.getFullYear();
}
11 changes: 10 additions & 1 deletion app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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?";
}
}
62 changes: 62 additions & 0 deletions director-details.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Director Details</title>
<link rel="stylesheet" href="style.css">
<script src="director-details.js" defer></script>
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
<header style="margin-bottom: -50px">
<h1 id="my-heading">
The Mo<span class="highlight">vieV</span>erse
</h1>
<button class="back-btn" onclick="window.location.href='index.html'">Home</button>
<button class="about" onclick="window.location.href='about.html'">About</button>
<button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>
<form id="form">
<input
type="text"
id="search"
placeholder="Search For Any Movie..."
class="search"
/>
<button type="button" id="button-search" onclick="">Search</button>
</form>
</header>

<div class="genres" style="margin-left: 25px">
<h2 id="search-title"></h2>
</div>

<main id="main" style="margin-left: 25px; margin-bottom: -40px">

</main>

<div class="details-container" id="director-details-container">
<!-- Left side for Director Image -->
<div class="director-left">
<h2 id="director-name" class="director-header"></h2>
<img id="director-image" alt="director Image" style="width: 25vw"/>
</div>

<!-- Right side for Description and Info -->
<div class="director-right" id="director-description">
<!-- Director details will be populated here -->
</div>
</div>

<script src="director-details.js"></script>

<button id="movie-of-the-day-btn2" onclick="showMovieOfTheDay()" title="Get a recommended movie to watch for today!">Movie of the Day</button>

<!-- Create a button to go to the Movie Discussions page -->
<button id="discussions-btn" onclick="window.location.href='discussions.html'" title="Want to know more about movies? Chat with our intelligent chatbot!" style="margin-bottom: -55px">MovieVerse Chatbot</button>

<!-- Create a button to go to the Trivia Game page -->
<button id="trivia-btn" onclick="window.location.href='trivia.html'" style="margin-bottom: -50px" title="Play a quick trivia to test your knowledge about movies!">Trivia Game</button>
</body>

</html>
Loading

0 comments on commit 9f8c1f7

Please sign in to comment.