+
+ ${movie.title}
+Director: ${movie.director} | Year: ${movie.year}
+Genre: ${movie.genre}
+${movie.description}
+Filter by genre + + + + +
+Sort by year + + + +
+Director: ${movie.director} | Year: ${movie.year}
+Genre: ${movie.genre}
+${movie.description}
+No movies found for the selected genre.
'; + } else { + displayMovies(filteredMovies); } -] +} + +// Sorting functions +function sortMoviesNewToOld() { + const sortedMovies = [...movies].sort((a, b) => b.year - a.year); + displayMovies(sortedMovies); +} + +function sortMoviesOldToNew() { + const sortedMovies = [...movies].sort((a, b) => a.year - b.year); + displayMovies(sortedMovies); +} + +// Variable to track the currently selected genre +let currentGenre = ''; + +// Function to handle genre button click +function handleGenreClick(genre) { + if (currentGenre === genre) { + currentGenre = ''; + displayAllMovies(); + } else { + currentGenre = genre; + recommendMovieByGenre(currentGenre); + } +} + +// Add event listeners for the genre buttons +document.getElementById('sci-fi').addEventListener('click', () => handleGenreClick('sci-fi')); +document.getElementById('horror').addEventListener('click', () => handleGenreClick('horror')); +document.getElementById('comedy').addEventListener('click', () => handleGenreClick('comedy')); +document.getElementById('romance').addEventListener('click', () => handleGenreClick('romance')); + +// Add event listeners for the sorting buttons +document.getElementById('sort-new-to-old').addEventListener('click', sortMoviesNewToOld); +document.getElementById('sort-old-to-new').addEventListener('click', sortMoviesOldToNew); + +// Initially display all movies +displayAllMovies(); diff --git a/style.css b/style.css index e69de29..a40e301 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,86 @@ +body { + text-align: center; + background-color: #EEEEEE; +} + +article { + border: solid 3px #929AAB; + margin-top: 50px; + padding: 20px; + display: flex; +} + +img { + width: 184px; + height: 273px; +} + +.card-content { + display: flex; + flex-direction: column; + justify-content: center; + flex: 1; + margin-left: 50px; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; +} + +h1 { + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + font-weight: bold; + text-transform: uppercase; + color: #white; + margin-bottom: 150%; +} + +h2 { + font-family: Arial, Helvetica, sans-serif; +} + +button { + cursor: pointer; + margin: 5px; + background-color: #393E46; + color: white; + border: solid 2px #929AAB; + border-radius: 30px +} + +button:hover { + background-color: #929AAB; +} + +.filter { + margin-bottom: 20px; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; +} + +.sort { + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; +} + +.hero { + background-image: url(https://media.istockphoto.com/id/1522056968/photo/happy-girls-watching-a-surprising-movie-in-theatre.webp?a=1&b=1&s=612x612&w=0&k=20&c=vuqdVzunFwJDj13oWRmynZ45j-zDgZyM8BaemwUzxDE=); + background-size: cover; + background-position: center; + height: 350px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + color: white; +} + +@media (min-width:900px) { + h1 { + position: absolute; + top: 10px; + /* Adjusts the distance from the top of the page */ + left: 10px; + /* Adjusts the distance from the left side of the page */ + margin: 25px; + /* Removes default margin for more precise positioning */ + + + } + +} \ No newline at end of file