From 16352ef4dc083fdfd45991b1c5e11281ca6ab90b Mon Sep 17 00:00:00 2001 From: Agber Emmanuel Date: Tue, 23 May 2023 00:41:08 +0100 Subject: [PATCH 1/2] initial commit --- .env | 1 + api.txt | 1 + app.css | 360 +++++++++++++++++++++++++++++++++++++++++++++++++++++ app.js | 224 +++++++++++++++++++++++++++++++++ index.html | 132 ++++++++++++++++++++ 5 files changed, 718 insertions(+) create mode 100644 .env create mode 100644 api.txt create mode 100644 app.css create mode 100644 app.js create mode 100644 index.html diff --git a/.env b/.env new file mode 100644 index 0000000..96e296e --- /dev/null +++ b/.env @@ -0,0 +1 @@ +API_key = 2969cb5dab804fa038e6147c4bca25d4 diff --git a/api.txt b/api.txt new file mode 100644 index 0000000..00d0387 --- /dev/null +++ b/api.txt @@ -0,0 +1 @@ +https://api.themoviedb.org/3/movie/550?api_key=2969cb5dab804fa038e6147c4bca25d4 \ No newline at end of file diff --git a/app.css b/app.css new file mode 100644 index 0000000..eba20e4 --- /dev/null +++ b/app.css @@ -0,0 +1,360 @@ +@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600&display=swap"); + +:root { + --red: #9108cc; + --black: #000; + --white: #fff; + --light-white: #aaa; + --light-bg: #aaa; +} + +* { + font-family: "Nunito", sans-serif; + text-decoration: none; + outline: none; + text-transform: capitalize; + transition: all 0.2s linear; + padding: 0; + margin: 0; + box-sizing: border-box; + background-color: rgba(44, 43, 43, 0.973); +} + +html { + font-size: 90%; + scroll-behavior: smooth; + scroll-padding-top: 5rem; + overflow-x: hidden; +} + +html::-webkit-scrollbar { + width: 1rem; +} + +html::-webkit-scrollbar-track { + background: var(--black); +} + +html::-webkit-scrollbar-thumb { + background: var(--red); +} + +.landing_page { + padding: 0 5rem; +} + +.header { + /* background-image: url('../images/bg_img.png'); */ + + width: 100%; + height: 80vh; + padding: 0; + margin: 0; +} + +.navbar_section { + display: flex; + justify-content: space-between; + align-items: center; + gap: 2rem; + padding: 2rem 1rem; +} + +.navbar_section .logo { + font-size: 1.2rem; + font-weight: bold; + color: white; + padding: 0.5rem 1rem; + cursor: pointer; +} + +.navbar_section ul { + width: 50rem; + display: flex; + justify-content: space-between; + align-items: center; + list-style-type: none; + padding: 0.5rem 1rem; +} + + +.navbar_section ul li a { + display: inline-block; + color: var(--white); + cursor: pointer; +} + +.navbar_section ul li a:hover { + background: var(--red); +} + + +.search_profile { + display: flex; + align-items: center; + gap: 1rem; +} + +.search_div { + display: flex; + align-items: center; + gap: 0.5rem; + background-color: red; + border-radius: 50px; + background-color: gray; + padding: 0.4rem 0.8rem; +} + +.search_div input { + color: white; + font-size: 0.8rem; + outline: none; + border: none; + background-color: transparent; + width: 5rem; +} + +.search_div input::placeholder { + color: white; + font-size: 0.8rem; +} + +.search_profile img { + border-radius: 50%; + width: 2rem; + height: 2rem; +} + +/* Hero secion */ + +.hero_section .right_hero { + margin-top: 10rem; + width: 50%; +} + +.hero_play_div { + display: flex; + justify-content: start; + align-items: center; + gap: 1.5rem; + margin: 1rem 0; +} + +.hero_play { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.9rem; + font-weight: bold; + color: black; + background-color: white; + border-radius: 50px; + padding: 0.5rem 1rem; + cursor: pointer; +} + +.hero_play_div .paly_plus_icon { + border-radius: 50%; + background-color: white; + width: 2rem; + padding: 0.5rem; + cursor: pointer; +} + +.hero_section .right_hero .hero_text { + margin-bottom: 1rem; +} + +.hero_section .right_hero .hero_text2 { + font-size: 0.9rem; + margin-bottom: 1rem; +} + +/* TRENDING SECTION */ + +.trending_section { + margin-bottom: 5rem; +} + +.trending_section .trending_top { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 2rem; +} + +.trending_section .trending_top .top_text { + font-size: 1.1rem; + font-weight: bold; + color: white; +} + +.trending_section .trending_top div { + display: flex; + align-items: center; + gap: 1rem; +} + +.trending_section .trending_top div a { + color: orange; + text-decoration: underline; + border-right: 1px solid white; + padding: 0.2rem 1rem; +} + +.trending_section .trending_top div .next_icons { + display: flex; + align-items: center; + gap: 0.5rem; + color: white; +} + +.trending_section .trending_top div .next_icons .left_nextIcon, +.trending_section .trending_top div .next_icons .right_nextIcon { + + font-weight: 200; + border: 1px solid white; + border-radius: 50%; + padding: 0.3rem 0.5rem; + cursor: pointer; +} + +.trending_section .movie_cards { + display: flex; + justify-content: start; +overflow-x: auto; +gap: 1rem; +scroll-behavior:smooth; +} +.trending_section .movie_cards::-webkit-scrollbar{ + /* hide scrollbar */ + display:none; +} + +.trending_section .movie_cards img { + border-radius: 25px; + width: 100%; + height: 100%; + object-fit: cover; +} + +.trending_section .movie_card { + flex-shrink:0; + width: 17rem; + height: 20rem; + overflow: hidden; +} + +.trending_section .movie_card .add_movie { + position: absolute; + right: 1rem; + top: 1.5rem; + + color: white; + font-weight: lighter; + background-color: gray; + border-radius: 50%; + padding: 0.5rem; + cursor: pointer; + z-index: 50; +} + +.trending_section .movie_card img { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + z-index: 10; +} + +/* SERIES SECION */ + +.movie_cards_series { + display: flex; +gap: 1.3rem; +flex-flow:row wrap; +} + +.movie_card_series { + display: grid; + grid-template-columns: 1fr 1fr; + align-items: center; + justify-content: start; + gap: 1rem; + width: 27rem; + border-radius: 20px; + background-color: rosybrown; + padding: 1rem; + overflow: hidden; +} + + +.movie_card_series img { + width: 13rem; + height: auto; + border-radius:10px; +} + +.movie_card_series .card_details { + background-color: transparent; +} + +.movie_card_series .card_details .card_titile { + background-color: transparent; + color: white; + font-size: 1.1rem; + font-weight: 800; + margin-bottom: 0.5rem; +} + +.movie_card_series .card_details .card_titile span { + font-size: 0.8rem; + font-weight: 300; + margin-left: 0.5rem; +} + +.movie_card_series .card_details .card_space { + background-color: transparent; + font-size: 0.8rem; + color: beige; + margin-bottom: 1rem; +} + +.movie_card_series .card_details .card_text { + background-color: transparent; + font-size: 0.9rem; +} + +.movie_card_series .card_details .hero_play_div { + background-color: transparent; +} + +/* modal stylings */ +.modal { + display: none; + position: fixed; + z-index: 999; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0, 0, 0, 0.5); + } + + .modal-content { + background-color: #fefefe; + margin: 10% auto; + padding: 20px; + border: 1px solid #888; + max-width: 600px; + } + + .close { + float: right; + cursor: pointer; + } + \ No newline at end of file diff --git a/app.js b/app.js new file mode 100644 index 0000000..a7ea8fe --- /dev/null +++ b/app.js @@ -0,0 +1,224 @@ +const apiURL = 'https://api.themoviedb.org/3/movie/popular?api_key=2969cb5dab804fa038e6147c4bca25d4'; +const imgURL = "https://image.tmdb.org/t/p/w1280/" +const trendingUrl = 'https://api.themoviedb.org/3/trending/movie/day?api_key=2969cb5dab804fa038e6147c4bca25d4'; +const seriesUrl = 'https://api.themoviedb.org/3/tv/popular?api_key=2969cb5dab804fa038e6147c4bca25d4'; + +const search = document.getElementById('search'); +const form = document.getElementById('form'); +const main = document.getElementById('main'); + +const movie_cards = document.getElementsByClassName('movie_cards')[0]; +const movie_cards_series = document.getElementsByClassName('movie_cards_series')[0]; + + + +viewAllLink = document.querySelector('.trending_top a'); +viewAllSeries = document.getElementById('view_all') + +// Variable to store the initial 5 movies +let initialMovies = []; + +//left and right sliding +const movieContainer = document.querySelector('.movie_cards'); +const prevButton = document.querySelector('.left_nextIcon'); +const nextButton = document.querySelector('.right_nextIcon'); + +let movieIndex = 0; +//add event listeners to next and prev buttons +prevButton.addEventListener('click', () => { + movieIndex = Math.max(movieIndex - 1, 0) //movie index should never be negative + showMovies(initialMovies, movie_cards) +}) + + +nextButton.addEventListener('click', () => { + const totalMovies = initialMovies.length; + movieIndex = (movieIndex + 1) % totalMovies; + const endIndex = (movieIndex + 5) % totalMovies; + const visibleMovies = initialMovies.slice(movieIndex, endIndex); + showMovies(visibleMovies, movie_cards); +}); + + +//get trending movies with initial 5 movies only +trendingMovies(trendingUrl) + +// // Add a click event listener to the "View All" link +// viewAllLink.addEventListener('click', () => { +// if (initialMovies.length > 0) { +// // Call the trendingMovies function again to fetch and display all the trending movies + +// } else { +// // Show the initial 5 movies again +// showMovies(initialMovies, movie_cards); +// } +// }); + + +async function trendingMovies(url) { + const response = await fetch(url); + const jsonData = await response.json(); + initialMovies = jsonData.results; + console.log(initialMovies) + // if (limit) { + // movies = movies.slice(0, limit); //keep only the first 5 movies + // initialMovies = [...movies]; + // } + + + showMovies(initialMovies, movie_cards); + + +} + +const showMovies = (movies, container) => { + container.innerHTML = ''; + movies.forEach((movie, i) => { + const { title, poster_path, vote_average, runtime, genre_ids } = movie; + const card = document.createElement('div') + card.classList.add('movie_card'); + card.style.transform = `translateX(${(i - movieIndex) * 1}rem)`; + card.innerHTML = ` + ${title} + ` + //add click listener to movie card + card.addEventListener('click', () => { + //populate the modal + document.getElementById('modal-title').textContent = title; + document.getElementById('modal-rating').textContent = vote_average; + document.getElementById('modal-runtime').textContent = runtime; + document.getElementById('modal-genre').textContent = genre_ids; + + //show the modal + const modal = document.getElementById('modal'); + modal.style.display = 'block'; + }) + + container.appendChild(card); + + }) + const containerWidth = movies.length * 17; + container.style.width = `${containerWidth}rem`; +}; +//close the modal when open +document.addEventListener('click', (event) => { + if (event.target.classList.contains('close')) { + const modal = document.getElementById('modal'); + modal.style.display = 'none'; + } +}); + + +viewAllSeries.addEventListener('click', () => { + // Call the trendingMovies function again to fetch and display all the trending movies + series(seriesUrl) +}); +//get series +series(seriesUrl, 3) +async function series(url, limit = null) { + const response = await fetch(url); + const jsonData = await response.json(); + let seriesData = jsonData.results; + console.log(seriesData) + // if (limit) { + // seriesData = seriesData.slice(0, limit); + // } + showSeries(seriesData, movie_cards_series); +} + + + + +const showSeries = (series, container) => { + container.innerHTML = ''; + series.forEach((item) => { + const { original_name, poster_path, vote_average, overview, first_air_date } = item; + const card = document.createElement('div') + card.innerHTML = ` + ${original_name} + `; + card.classList.add('movie_card_series'); + + const cardDetails = document.createElement('div'); + cardDetails.classList.add('card_details'); + //limit the overview to a maximum of limited words + const words = overview.split(' '); + const limitedWords = words.slice(0, 20).join(' '); + cardDetails.innerHTML = ` +

${original_name}${first_air_date}

+

25.26 EP3.86 GB

+

${limitedWords}...

+
+

play

+

+
+ ` + + card.appendChild(cardDetails) + container.appendChild(card); + + }) +}; + +// form.addEventListener('submit', (e) => { +// e.preventDefault(); +// const searchData = search.value; +// if (searchData && searchData !== '') { +// getMovies(apiURL + searchData); +// search.value = ''; // Reset the search input field +// } else { +// window.location.reload(); +// } +// }); + +// // const apiURL = 'https://api.themoviedb.org/3/search/movie?api_key=2969cb5dab804fa038e6147c4bca25d4&query='; +// const imgURL = "https://image.tmdb.org/t/p/w1280/"; + +// const search = document.getElementById('search'); +// const form = document.getElementById('form'); +// const main = document.getElementById('main'); + +// // Get movies +// form.addEventListener('submit', (e) => { +// e.preventDefault(); +// const searchData = search.value; +// if (searchData && searchData !== '') { +// const searchURL = apiURL + searchData; +// getMovies(searchURL); +// search.value = ''; // Reset the search input field +// } else { +// window.location.reload(); +// } +// }); + +// async function getMovies(url) { +// const response = await fetch(url); +// const jsonData = await response.json(); +// console.log(jsonData); +// showMovies(jsonData.results); +// } + +// const showMovies = (movies) => { +// main.innerHTML = ''; +// movies.forEach((movie) => { +// createMovieElement(movie); +// }); +// }; + +// function createMovieElement(movie) { +// const { title, vote_average, poster_path, overview } = movie; +// const movieDiv = document.createElement('div'); +// movieDiv.classList.add('movie'); +// movieDiv.innerHTML = ` +// ${title} +//
+//

${title}

+// ${vote_average} +//
+//
+//

Overview

+// ${overview} +//
+// `; +// main.appendChild(movieDiv); +// } \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..a70005b --- /dev/null +++ b/index.html @@ -0,0 +1,132 @@ + + + + + + + + + + + + + + + + + + + Movie App + + + +
+
+
+ + + + +
+
+ + +
+ +
+
+ + +
+
+ title +
+

play

+

+
+

In the next installment, the survivors of the Ghostface killings leave Woodsboro behind + and start a fresh + chapter in New York City.

+

Horror, Mystery, Thriller

+
+
+
+ + + +
+
+

Trending

+
+ view all +
+

+

+
+
+
+ +
+
+
+ + +
+
+

Binge-worthy series

+
+ view all +
+

+

+
+
+
+ +
+
+ +
+

Bridgeton 2020

+

25.26 EP3.86 GB

+

Ghost follows Tariq navigating his new life, in which his desire to shed his father's + legacy comes up + against the mounting pressure to save his family.

+
+

play

+

+
+
+
+ + + +
+ +
+ + + +
+ + + + + + \ No newline at end of file From 2b1c24da86a0dc786b8f5d613a81a8f5b4ba9cb8 Mon Sep 17 00:00:00 2001 From: Agber Emmanuel Date: Thu, 25 May 2023 01:12:48 +0100 Subject: [PATCH 2/2] first commit --- .env | 2 +- app.css | 186 ++++++++++++++++++++++---------- app.js | 256 ++++++++++++++++++++++++++------------------ assets/Frame 90.png | Bin 0 -> 5262 bytes assets/Frame.png | Bin 0 -> 1254 bytes assets/Search.png | Bin 0 -> 400 bytes index.html | 131 +++++++++++------------ 7 files changed, 347 insertions(+), 228 deletions(-) create mode 100644 assets/Frame 90.png create mode 100644 assets/Frame.png create mode 100644 assets/Search.png diff --git a/.env b/.env index 96e296e..ab59fd6 100644 --- a/.env +++ b/.env @@ -1 +1 @@ -API_key = 2969cb5dab804fa038e6147c4bca25d4 +API_key = 2969cb5dab804fa038e6147c4bca25d4; diff --git a/app.css b/app.css index eba20e4..d440fc8 100644 --- a/app.css +++ b/app.css @@ -17,7 +17,6 @@ padding: 0; margin: 0; box-sizing: border-box; - background-color: rgba(44, 43, 43, 0.973); } html { @@ -66,6 +65,12 @@ html::-webkit-scrollbar-thumb { color: white; padding: 0.5rem 1rem; cursor: pointer; + display: flex; + gap: 1rem; + align-items: center; +} +.navbar_section .logo img{ + background: none; } .navbar_section ul { @@ -121,8 +126,12 @@ html::-webkit-scrollbar-thumb { .search_profile img { border-radius: 50%; - width: 2rem; - height: 2rem; + width: 0.7rem; + margin-right: 0.3rem; + align-items: center; +} +.search_profile .human_image{ + width:2rem; } /* Hero secion */ @@ -132,35 +141,6 @@ html::-webkit-scrollbar-thumb { width: 50%; } -.hero_play_div { - display: flex; - justify-content: start; - align-items: center; - gap: 1.5rem; - margin: 1rem 0; -} - -.hero_play { - display: flex; - align-items: center; - gap: 0.5rem; - font-size: 0.9rem; - font-weight: bold; - color: black; - background-color: white; - border-radius: 50px; - padding: 0.5rem 1rem; - cursor: pointer; -} - -.hero_play_div .paly_plus_icon { - border-radius: 50%; - background-color: white; - width: 2rem; - padding: 0.5rem; - cursor: pointer; -} - .hero_section .right_hero .hero_text { margin-bottom: 1rem; } @@ -174,6 +154,7 @@ html::-webkit-scrollbar-thumb { .trending_section { margin-bottom: 5rem; + margin-left: 2rem; } .trending_section .trending_top { @@ -218,6 +199,15 @@ html::-webkit-scrollbar-thumb { padding: 0.3rem 0.5rem; cursor: pointer; } +.trending_section .trending_top div .next_icons .prev_Icon, +.trending_section .trending_top div .next_icons .next_Icon { + + font-weight: 200; + border: 1px solid white; + border-radius: 50%; + padding: 0.3rem 0.5rem; + cursor: pointer; +} .trending_section .movie_cards { display: flex; @@ -274,8 +264,13 @@ scroll-behavior:smooth; .movie_cards_series { display: flex; + flex-direction:row; gap: 1.3rem; -flex-flow:row wrap; +overflow-x: auto; +scroll-behavior:smooth; +justify-content: start; + overflow: hidden; + } .movie_card_series { @@ -284,18 +279,19 @@ flex-flow:row wrap; align-items: center; justify-content: start; gap: 1rem; - width: 27rem; + width: 18.5rem; + height:16rem; border-radius: 20px; background-color: rosybrown; padding: 1rem; - overflow: hidden; } .movie_card_series img { - width: 13rem; - height: auto; + width: 7rem; border-radius:10px; + top: 2rem; + bottom: 2rem; } .movie_card_series .card_details { @@ -332,29 +328,109 @@ flex-flow:row wrap; background-color: transparent; } -/* modal stylings */ .modal { + display: none; + position: fixed; + z-index: 999; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0, 0, 0, 0.5); +} + +.modal-content { + color:white; + border-radius: 10px;; + margin: 10% auto; + padding: 20px; + border: 1px solid #888; + max-width: 600px; +} + +.close { + float: right; + cursor: pointer; + color:red; + font-size: 2rem; +} + +.background_image{ + position: relative; +} + +.background_content { + position: absolute; + top: 30%; + left: 3%; + transform: translate(0, -50%); + text-align: left; + width: 30%; + color: #FFF; +} + +.play_buttons{ + display: flex; + justify-content: start; + align-items: center; + gap: 1.5rem; + margin: 1rem 0; +} +.play_button{ + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.9rem; + font-weight: bold; + color: black; + background-color: white; + border-radius: 50px; + padding: 0.5rem 1rem; + cursor: pointer; +} + +.plus_button{ + border-radius: 50%; + background-color: white; + width: 2rem; + padding: 0.5rem; + cursor: pointer; +} +.collapsed{ + display: flex; +} +/* media queries */ +@media (max-width: 1268px) { + .navbar_links { display: none; - position: fixed; - z-index: 999; - left: 0; - top: 0; + } + + .menu_toggle { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + width: 30px; + height: 20px; + cursor: pointer; + } + + .menu_toggle .bar { width: 100%; - height: 100%; - overflow: auto; - background-color: rgba(0, 0, 0, 0.5); + height: 2px; + background-color: #000; } - .modal-content { - background-color: #fefefe; - margin: 10% auto; - padding: 20px; - border: 1px solid #888; - max-width: 600px; + .collapsed { + display: none; } - .close { - float: right; - cursor: pointer; + .navbar_section.collapsed .navbar_links { + display: flex; } - \ No newline at end of file + + .navbar_section.collapsed .search_profile { + display: flex; + } +} diff --git a/app.js b/app.js index a7ea8fe..def77fb 100644 --- a/app.js +++ b/app.js @@ -2,71 +2,101 @@ const apiURL = 'https://api.themoviedb.org/3/movie/popular?api_key=2969cb5dab804 const imgURL = "https://image.tmdb.org/t/p/w1280/" const trendingUrl = 'https://api.themoviedb.org/3/trending/movie/day?api_key=2969cb5dab804fa038e6147c4bca25d4'; const seriesUrl = 'https://api.themoviedb.org/3/tv/popular?api_key=2969cb5dab804fa038e6147c4bca25d4'; +searchAPI = 'https://api.themoviedb.org/3/search/movie?api_key=2969cb5dab804fa038e6147c4bca25d4' const search = document.getElementById('search'); const form = document.getElementById('form'); -const main = document.getElementById('main'); const movie_cards = document.getElementsByClassName('movie_cards')[0]; const movie_cards_series = document.getElementsByClassName('movie_cards_series')[0]; - viewAllLink = document.querySelector('.trending_top a'); viewAllSeries = document.getElementById('view_all') // Variable to store the initial 5 movies let initialMovies = []; - +let initialSeries = []; +// Sort variables +let isSortOptionsVisible = false; //left and right sliding const movieContainer = document.querySelector('.movie_cards'); const prevButton = document.querySelector('.left_nextIcon'); const nextButton = document.querySelector('.right_nextIcon'); +const prevSeriesButton = document.querySelector('.prev_Icon'); +const nextSeriesButton = document.querySelector('.next_Icon'); let movieIndex = 0; +let seriesIndex = 0; //add event listeners to next and prev buttons +prevSeriesButton.addEventListener('click', () => { + seriesIndex = Math.max(seriesIndex - 1, 0) + showSeries(initialSeries, movie_cards_series) + console.log('prev series button') +}) prevButton.addEventListener('click', () => { movieIndex = Math.max(movieIndex - 1, 0) //movie index should never be negative showMovies(initialMovies, movie_cards) + console.log('prevButton') }) - - +nextSeriesButton.addEventListener('click', () => { + const totalSeries = initialSeries.length; + seriesIndex = (seriesIndex + 1) % totalSeries; + const seriesEndIndex = (seriesIndex + 5) % totalSeries; + const visibleSeries = initialSeries.slice(seriesIndex, seriesEndIndex); + showSeries(visibleSeries, movie_cards_series); + + console.log('clicked next') +}); nextButton.addEventListener('click', () => { - const totalMovies = initialMovies.length; - movieIndex = (movieIndex + 1) % totalMovies; - const endIndex = (movieIndex + 5) % totalMovies; - const visibleMovies = initialMovies.slice(movieIndex, endIndex); - showMovies(visibleMovies, movie_cards); + movieIndex = Math.min(movieIndex + 1, initialMovies.length - 1) + showMovies(initialMovies, movie_cards); }); + //get trending movies with initial 5 movies only trendingMovies(trendingUrl) -// // Add a click event listener to the "View All" link -// viewAllLink.addEventListener('click', () => { -// if (initialMovies.length > 0) { -// // Call the trendingMovies function again to fetch and display all the trending movies - -// } else { -// // Show the initial 5 movies again -// showMovies(initialMovies, movie_cards); -// } -// }); - +//apply backgroundImage +function applyBackgroundImage(imageUrl, title, releaseDate, overview) { + const backgroundElement = document.querySelector('.background_image'); + backgroundElement.style.backgroundImage = `url(${imageUrl})`; + backgroundElement.style.backgroundSize = 'cover'; + backgroundElement.style.backgroundPosition = 'center'; + backgroundElement.style.backgroundRepeat = 'no-repeat'; + const backgroundContent = document.createElement('div'); + backgroundContent.classList.add('background_content'); + backgroundContent.innerHTML = ` +

${title}

+

${releaseDate}

+
+ + +
+

${overview}

+ `; + + backgroundElement.appendChild(backgroundContent); + +} async function trendingMovies(url) { const response = await fetch(url); const jsonData = await response.json(); initialMovies = jsonData.results; console.log(initialMovies) - // if (limit) { - // movies = movies.slice(0, limit); //keep only the first 5 movies - // initialMovies = [...movies]; - // } - + if (initialMovies.length > 0){ + const firstMovie = initialMovies[0]; + const backgroundImageURL = imgURL + firstMovie.poster_path; + const title = firstMovie.title; + const releaseDate = firstMovie.release_date; + const overview = firstMovie.overview; + applyBackgroundImage(backgroundImageURL, title, releaseDate, overview); + } - showMovies(initialMovies, movie_cards); + + showMovies(initialMovies, movie_cards, movieIndex); } @@ -77,7 +107,7 @@ const showMovies = (movies, container) => { const { title, poster_path, vote_average, runtime, genre_ids } = movie; const card = document.createElement('div') card.classList.add('movie_card'); - card.style.transform = `translateX(${(i - movieIndex) * 1}rem)`; + card.style.transform = `translateX(${(i - movieIndex) * 2}rem)`; card.innerHTML = ` ${title} ` @@ -89,17 +119,17 @@ const showMovies = (movies, container) => { document.getElementById('modal-runtime').textContent = runtime; document.getElementById('modal-genre').textContent = genre_ids; - //show the modal + // //show the modal const modal = document.getElementById('modal'); modal.style.display = 'block'; }) - container.appendChild(card); - }) - const containerWidth = movies.length * 17; - container.style.width = `${containerWidth}rem`; -}; + }) + + + } + //close the modal when open document.addEventListener('click', (event) => { if (event.target.classList.contains('close')) { @@ -114,16 +144,16 @@ viewAllSeries.addEventListener('click', () => { series(seriesUrl) }); //get series -series(seriesUrl, 3) -async function series(url, limit = null) { +series(seriesUrl) +async function series(url) { const response = await fetch(url); const jsonData = await response.json(); - let seriesData = jsonData.results; - console.log(seriesData) + initialSeries = jsonData.results; + console.log(initialSeries) // if (limit) { // seriesData = seriesData.slice(0, limit); // } - showSeries(seriesData, movie_cards_series); + showSeries(initialSeries, movie_cards_series); } @@ -131,19 +161,20 @@ async function series(url, limit = null) { const showSeries = (series, container) => { container.innerHTML = ''; - series.forEach((item) => { + series.forEach((item, i) => { const { original_name, poster_path, vote_average, overview, first_air_date } = item; const card = document.createElement('div') card.innerHTML = ` ${original_name} `; card.classList.add('movie_card_series'); + card.style.transform = `translateX(${(i - seriesIndex) * 1}rem)`; const cardDetails = document.createElement('div'); cardDetails.classList.add('card_details'); //limit the overview to a maximum of limited words const words = overview.split(' '); - const limitedWords = words.slice(0, 20).join(' '); + const limitedWords = words.slice(0, 10).join(' '); cardDetails.innerHTML = `

${original_name}${first_air_date}

25.26 EP3.86 GB

@@ -153,72 +184,89 @@ const showSeries = (series, container) => {

` - + card.appendChild(cardDetails) container.appendChild(card); + }) + }; -// form.addEventListener('submit', (e) => { -// e.preventDefault(); -// const searchData = search.value; -// if (searchData && searchData !== '') { -// getMovies(apiURL + searchData); -// search.value = ''; // Reset the search input field -// } else { -// window.location.reload(); -// } -// }); - -// // const apiURL = 'https://api.themoviedb.org/3/search/movie?api_key=2969cb5dab804fa038e6147c4bca25d4&query='; -// const imgURL = "https://image.tmdb.org/t/p/w1280/"; - -// const search = document.getElementById('search'); -// const form = document.getElementById('form'); -// const main = document.getElementById('main'); - -// // Get movies -// form.addEventListener('submit', (e) => { -// e.preventDefault(); -// const searchData = search.value; -// if (searchData && searchData !== '') { -// const searchURL = apiURL + searchData; -// getMovies(searchURL); -// search.value = ''; // Reset the search input field -// } else { -// window.location.reload(); -// } -// }); - -// async function getMovies(url) { -// const response = await fetch(url); -// const jsonData = await response.json(); -// console.log(jsonData); -// showMovies(jsonData.results); -// } - -// const showMovies = (movies) => { -// main.innerHTML = ''; -// movies.forEach((movie) => { -// createMovieElement(movie); -// }); -// }; - -// function createMovieElement(movie) { -// const { title, vote_average, poster_path, overview } = movie; -// const movieDiv = document.createElement('div'); -// movieDiv.classList.add('movie'); -// movieDiv.innerHTML = ` -// ${title} -//
-//

${title}

-// ${vote_average} -//
-//
-//

Overview

-// ${overview} -//
-// `; -// main.appendChild(movieDiv); -// } \ No newline at end of file +//search movies +form.addEventListener('submit', async (e) =>{ + e.preventDefault(); + const searchTitle = search.value; + if(searchTitle) { + const searchURL = searchAPI + '&query=' + searchTitle; + const response = await fetch(searchURL); + const jsonData = await response.json(); + const searchResults = jsonData.results; + showMovies(searchResults, movie_cards); + search.value = ''; + } +}); + +// event listener to sort icon +const sortIcon = document.querySelector('.sort i'); +const sortOptions = document.querySelector('.sort-options'); + +sortIcon.addEventListener('click', () => { + isSortOptionsVisible = !isSortOptionsVisible; + sortOptions.style.display = isSortOptionsVisible ? 'block' : 'none'; + }); + +//event listener to the sort options +const sortReleaseDateButton = document.getElementById('sort-release-date'); +sortReleaseDateButton.addEventListener('click', () => { + sortMoviesByReleaseDate(); + sortSeriesByReleaseDate(); +}); + +const sortPopularityButton = document.getElementById('sort-popularity'); +sortPopularityButton.addEventListener('click', () => { + sortMoviesByPopularity(); + sortSeriesByPopularity(); +}); + +// Function to sort the movies by release date +function sortMoviesByReleaseDate() { + initialMovies.sort((a, b) => { + const dateA = new Date(a.release_date); + const dateB = new Date(b.release_date); + return dateA - dateB; + }); + + showMovies(initialMovies, movie_cards); + } + //sort by popularity + function sortMoviesByPopularity() { + initialMovies.sort((a, b) => b.popularity - a.popularity); + + showMovies(initialMovies, movie_cards); + } + + //function to sort series + function sortSeriesByReleaseDate() { + initialSeries.sort((a, b) => { + const dateA = new Date(a.first_air_date); + const dateB = new Date(b.first_air_date); + return dateA - dateB; + }); + + showSeries(initialSeries, movie_cards_series); + } + //sort by popularity + function sortSeriesByPopularity() { + initialSeries.sort((a, b) => b.popularity - a.popularity); + + showSeries(initialSeries, movie_cards_series); + } + + // Toggle the collapsed class on menu toggle click +const menuToggle = document.querySelector('.menu_toggle'); +const navbarSection = document.querySelector('.navbar_section'); + +menuToggle.addEventListener('click', () => { + navbarSection.classList.toggle('collapsed'); +}); \ No newline at end of file diff --git a/assets/Frame 90.png b/assets/Frame 90.png new file mode 100644 index 0000000000000000000000000000000000000000..ed39c8afa53bbd271832ca4fe40a3675ecf3ab62 GIT binary patch literal 5262 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 Q)c^nh07*qoM6N<$g0)>w<^TWy literal 0 HcmV?d00001 diff --git a/assets/Search.png b/assets/Search.png new file mode 100644 index 0000000000000000000000000000000000000000..6626fb8b7fae841fe72b8aef774ea29c598c5267 GIT binary patch literal 400 zcmV;B0dM|^P)Q{nmJDb~1iQib&Hl-9nqWy&*#vtH z?qnQ}Tz{NkCgb7zR8P1WE9&bnPS8!lpmynj>)jSpa|ka~OCs2d8^6ie?X@HTb#oe; z_66qywER%?n?Z0*(dt97f@0_Bbp=ynT)_*Wnt9Dz6T#DD`FBHsO($M5zYImy3*le6 uKc-deKINl0000 - - - - Movie App
-
-
- - - - -
-
- - +
+
+
+
+
+
+
- -
-
- - -
-
- title -
-

play

-

+ +
+
+
+ search icon + +
+ +
+ image
-

In the next installment, the survivors of the Ghostface killings leave Woodsboro behind - and start a fresh - chapter in New York City.

-

Horror, Mystery, Thriller

-
-
- - - -
-
-

Trending

-
- view all -
-

-

+ +
+ +
+
+ +
+
+

Trending

+
+ +
+ + +
+
+ +
+ view all +
+

+

+
-
- -
-
- +
+
+ +

Binge-worthy series

-
+
view all
-

-

+

+

@@ -95,19 +95,12 @@
-

Bridgeton 2020

-

25.26 EP3.86 GB

-

Ghost follows Tariq navigating his new life, in which his desire to shed his father's - legacy comes up - against the mounting pressure to save his family.

-
-

play

-

-
+ +
- +
@@ -116,12 +109,14 @@ +