From 4e85d02e914cf13b8270154951c48f25fc84b80c Mon Sep 17 00:00:00 2001 From: elachcdv Date: Sun, 13 Feb 2022 11:44:06 +0100 Subject: [PATCH 01/22] Initial commit --- index.html | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/index.html b/index.html index e69de29b..2cdc8e85 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,12 @@ + + + + + JavaScript Project + + + +

JavaScript Project

+ + + \ No newline at end of file From f00ff868e3288877c45093e68ac449ef9ca32271 Mon Sep 17 00:00:00 2001 From: elachcdv Date: Fri, 25 Mar 2022 17:09:11 +0100 Subject: [PATCH 02/22] My app files --- index.html | 40 ++++++++++-- main.js | 185 +++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 58 +++++++++++++++++ 3 files changed, 276 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 2cdc8e85..307e3630 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,38 @@ + + + + + + + + My JS Project + - - JavaScript Project - + +

Movie App

- -

JavaScript Project

- + + + + - \ No newline at end of file +

movies:

+
+
+ +

Collection suggested movies:

+ + + + + diff --git a/main.js b/main.js index e69de29b..0484b23a 100644 --- a/main.js +++ b/main.js @@ -0,0 +1,185 @@ +"use strict"; +// imdb API +// przykładowy link +// "https://imdb-api.com/en/API/Title/k_1234567/..." + +// - znaleźć film - wpisanie w input tytułu filmu, odczytywanie value - search + debounce (poczekać np. 300ms) +// - przycisk szukaj wyzwala akcję szukania w api -> async f() fetch +// - szukanie w movie +// - wyświetlenie nazwy img i linku do filmu / ów + +// - za pomocą ID filmu znajdujacego się w repsonse dodanie dodatkowych informacji oraz linku do tych informacji +// - wyświetlenie informacjami filmu - lub wyświetlenie ich poniżej bez zmiany url + +window.addEventListener("DOMContentLoaded", () => { + const apiKey = "k_28x30ddn"; // const apiKey= "k_pgd93xda" + const inputMovieSearch = document.getElementById("searchMovie"); + const searchResultsMovies = document.getElementById("movieList"); + const urlAPI = `https://imdb-api.com/en/API/SearchMovie/${apiKey}`; + const urlDetailsAPI = `https://imdb-api.com/en/API/Title/${apiKey}`; + + // function init() { + // inputMovieSearch.addEventListener("keyup", (event) => { + // // debounce(getMovies(event.target.value), 2000); + // debounce(console.log(event.target.value), 2000); + // // console.log(event.target.value); + // // movieValue(event); + // }); + + function init() { + inputMovieSearch.addEventListener("keyup", debounce(getMovies, 300)); + + searchResultsMovies.addEventListener("click", (event) => { + const movieID = event.target.closest("a").id; + getDetails(movieID); + }); + } + init(); + + //delay function for input search + function debounce(callback, delay) { + let timeout; + return function () { + clearTimeout(timeout); + timeout = setTimeout(callback, delay); + }; + } + + //search results + async function getMovies(movie) { + const movieValue = inputMovieSearch.value; + const results = await fetch(`${urlAPI}/${movieValue}`) + .then((response) => response.json()) + .then((data) => data.results) + .then((data) => { + // console.log(data); // return results in console; + // add to DOM + createMoviesDOM(data); + }) + .catch((error) => console.log(error)); + } + + function createMoviesDOM(movies) { + for (const movie of movies) { + const movieElement = document.createElement("div"); + movieElement.classList.add("singleMovieList"); + // movieElement.innerHTML = `${movie.title}`; + movieElement.innerHTML = `${movie.title}`; + // movieElement.innerHTML = `${movie.title}`; + movieElement.style.backgroundImage = `url(${movie.image})`; + searchResultsMovies.appendChild(movieElement); + } + } + + // function which get link and create details DOM + async function getDetails(movieId) { + const details = await fetch(`${urlDetailsAPI}/${movieId}`) + .then((response) => response.json()) + // .then((data) => data.detail) + .then((data) => { + // console.log(data); + //add to DOM div after clicked on link + createMovieDetailsDom(data); + }); + // .catch((error) => new Error("Details not found")); + } + + function createMovieDetailsDom(data) { + const insideDetailBox = document.getElementById("currentClickedMovieId"); + insideDetailBox.innerHTML = ""; + + //image + if (data.image) { + const detailBoxImage = document.createElement("div"); + const title = data.title ? data.title : ""; + detailBoxImage.innerHTML = `${title}`; + detailBoxImage.classList.add("currentMovieImage"); + detailBoxImage.classList.add("box-left"); + insideDetailBox.appendChild(detailBoxImage); + } + + //rightBox + + const detailBoxRight = document.createElement("div"); + detailBoxRight.classList.add("box-right"); + insideDetailBox.append(detailBoxRight); + + //title + if (data.title) { + const detailBox = document.createElement("div"); + detailBox.innerHTML = `${data.title}`; + detailBox.classList.add("singleMovieDetails"); + detailBoxRight.appendChild(detailBox); + } + + //plot + if (data.plot) { + const detailBoxPlot = document.createElement("p"); + detailBoxPlot.innerHTML = `${data.plot}`; + detailBoxPlot.classList.add("plot"); + detailBoxRight.appendChild(detailBoxPlot); + } + + //rating + if (data.imDbRating) { + const detailBoxRating = document.createElement("p"); + detailBoxRating.innerHTML = `${data.imDbRating}`; + detailBoxRating.classList.add("rating"); + detailBoxRight.appendChild(detailBoxRating); + } + + // year + if (data.year) { + const detailBoxYear = document.createElement("p"); + detailBoxYear.innerHTML = `${data.year}`; + detailBoxYear.classList.add("year"); + detailBoxRight.appendChild(detailBoxYear); + } + + // genre + if (data.genres) { + const detailBoxGenres = document.createElement("p"); + detailBoxGenres.innerHTML = `${data.genres}`; + detailBoxGenres.classList.add("year"); + detailBoxRight.appendChild(detailBoxGenres); + } + + // languages + if (data.languages) { + const detailBoxLanguages = document.createElement("p"); + detailBoxLanguages.innerHTML = `${data.languages}`; + detailBoxLanguages.classList.add("movie-languages"); + detailBoxRight.appendChild(detailBoxLanguages); + } + + //stars - create ul + if (data.starList) { + createStars(data.starList); + } + + //runtimeStr + if (data.runtimeStr) { + const detailBoxRuntimeStr = document.createElement("p"); + detailBoxRuntimeStr.innerHTML = `${data.runtimeStr}`; + detailBoxRuntimeStr.classList.add("runtimeStr"); + detailBoxRight.appendChild(detailBoxRuntimeStr); + } + } + + //stars - create li inside ul + function createStars(stars) { + const detailBoxStars = document.createElement("ul"); + detailBoxStars.classList.add("stars"); + detailBoxRight.appendChild(detailBoxStars); + + for (const star of stars) { + const starElement = document.createElement("li"); + starElement.innerHTML = star.name; //`${Object.values(star)}`; + detailBoxStars.appendChild(starElement); + } + } + + // Suggested movies by category + // search movies by genres + // +}); diff --git a/style.css b/style.css index e69de29b..21ba980e 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,58 @@ +body { + background-color: beige; + font-family: Arial, Helvetica, sans-serif; +} +#movieList { + display: flex; + align-items: center; + justify-content: space-between; + align-content: center; + flex-direction: row; + flex-wrap: wrap; +} +.singleMovieList { + width: 200px; + height: 200px; + background: lightgray; + display: flex; + align-items: center; + justify-content: center; + align-content: center; + flex-direction: row; + /* background styling */ + background-size: contain; + background-repeat: no-repeat; + background-position: center; +} +label { + font-size: 1.5em; + font-weight: bold; + color: black; + display: block; +} +div#currentClickedMovieId { + /* display: flex; */ + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-column-gap: 30px; + grid-row-gap: 30px; + text-align: justify; + height: 100%; + padding: 20px; + margin: 50px auto; + /* background-color: rgb(245, 241, 241); */ +} +.currentMovieImage img { + width: 100%; + height: 100%; +} +.box-left, +.box-right { + /* border: 2px solid red; */ + height: auto; + float: left; + background-color: rgb(245, 241, 241); +} +.box-right { + padding: 20px; +} \ No newline at end of file From 2d7f42ab12b31aef2c41a30db5fecb9103af5d4b Mon Sep 17 00:00:00 2001 From: elachcdv Date: Sun, 27 Mar 2022 13:41:40 +0200 Subject: [PATCH 03/22] Get movies, get suggested movies --- index.html | 8 +++++-- main.js | 65 +++++++++++++++++++++++++++++++++--------------------- style.css | 3 ++- 3 files changed, 48 insertions(+), 28 deletions(-) diff --git a/index.html b/index.html index 307e3630..a6497e2b 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ - My JS Project + Movie App @@ -30,7 +30,11 @@

movies:

-

Collection suggested movies:

+

+ + Collection suggested movies +

+
diff --git a/main.js b/main.js index 0484b23a..80297dfa 100644 --- a/main.js +++ b/main.js @@ -15,28 +15,27 @@ window.addEventListener("DOMContentLoaded", () => { const apiKey = "k_28x30ddn"; // const apiKey= "k_pgd93xda" const inputMovieSearch = document.getElementById("searchMovie"); const searchResultsMovies = document.getElementById("movieList"); + const suggestedResultsList = document.getElementById("suggestedResultsList"); const urlAPI = `https://imdb-api.com/en/API/SearchMovie/${apiKey}`; const urlDetailsAPI = `https://imdb-api.com/en/API/Title/${apiKey}`; - - // function init() { - // inputMovieSearch.addEventListener("keyup", (event) => { - // // debounce(getMovies(event.target.value), 2000); - // debounce(console.log(event.target.value), 2000); - // // console.log(event.target.value); - // // movieValue(event); - // }); + const advancedSearchUrl = `https://imdb-api.com/API/AdvancedSearch/${apiKey}`; function init() { inputMovieSearch.addEventListener("keyup", debounce(getMovies, 300)); searchResultsMovies.addEventListener("click", (event) => { + //zamienić na funkcję - powtarza sie + const movieID = event.target.closest("a").id; + getDetails(movieID); + }); + suggestedResultsList.addEventListener("click", (event) => { + //zamienić na funkcję - powtarza sie powyżej const movieID = event.target.closest("a").id; getDetails(movieID); }); } init(); - //delay function for input search function debounce(callback, delay) { let timeout; return function () { @@ -53,13 +52,13 @@ window.addEventListener("DOMContentLoaded", () => { .then((data) => data.results) .then((data) => { // console.log(data); // return results in console; - // add to DOM - createMoviesDOM(data); + // add to DOM + createMoviesDOM(data, searchResultsMovies); }) .catch((error) => console.log(error)); } - function createMoviesDOM(movies) { + function createMoviesDOM(movies, htmlTarget) { for (const movie of movies) { const movieElement = document.createElement("div"); movieElement.classList.add("singleMovieList"); @@ -67,7 +66,7 @@ window.addEventListener("DOMContentLoaded", () => { movieElement.innerHTML = `${movie.title}`; // movieElement.innerHTML = `${movie.title}`; movieElement.style.backgroundImage = `url(${movie.image})`; - searchResultsMovies.appendChild(movieElement); + htmlTarget.appendChild(movieElement); } } @@ -75,15 +74,36 @@ window.addEventListener("DOMContentLoaded", () => { async function getDetails(movieId) { const details = await fetch(`${urlDetailsAPI}/${movieId}`) .then((response) => response.json()) - // .then((data) => data.detail) .then((data) => { // console.log(data); //add to DOM div after clicked on link createMovieDetailsDom(data); + const genres = transformGenresToApiParam(data.genreList); // " " + showSuggestions(genres); + }); + // .catch((error) => new Error("Details not found")); + } + + // suggestions + async function showSuggestions(genres) { + // transformGenresToApiParam(genres); + const suggestions = await fetch(`${advancedSearchUrl}/?genres=${genres}`) + .then((response) => response.json()) + .then((data) => data.results) + .then((data) => { + createMoviesDOM(data, suggestedResultsList); }); // .catch((error) => new Error("Details not found")); } + function transformGenresToApiParam(genres) { + const currentGenres = genres.map((genre) => { + return genre.value; + }); + return currentGenres.join().toLowerCase(); // "genre1,genre2,genre3" + } + + // function which create details DOM function createMovieDetailsDom(data) { const insideDetailBox = document.getElementById("currentClickedMovieId"); insideDetailBox.innerHTML = ""; @@ -99,7 +119,6 @@ window.addEventListener("DOMContentLoaded", () => { } //rightBox - const detailBoxRight = document.createElement("div"); detailBoxRight.classList.add("box-right"); insideDetailBox.append(detailBoxRight); @@ -140,7 +159,8 @@ window.addEventListener("DOMContentLoaded", () => { if (data.genres) { const detailBoxGenres = document.createElement("p"); detailBoxGenres.innerHTML = `${data.genres}`; - detailBoxGenres.classList.add("year"); + detailBoxGenres.classList.add("genres"); + detailBoxGenres.id = "genres"; detailBoxRight.appendChild(detailBoxGenres); } @@ -154,7 +174,7 @@ window.addEventListener("DOMContentLoaded", () => { //stars - create ul if (data.starList) { - createStars(data.starList); + createStars(data.starList, detailBoxRight); } //runtimeStr @@ -166,20 +186,15 @@ window.addEventListener("DOMContentLoaded", () => { } } - //stars - create li inside ul - function createStars(stars) { + function createStars(stars, box) { const detailBoxStars = document.createElement("ul"); detailBoxStars.classList.add("stars"); - detailBoxRight.appendChild(detailBoxStars); + box.appendChild(detailBoxStars); for (const star of stars) { const starElement = document.createElement("li"); - starElement.innerHTML = star.name; //`${Object.values(star)}`; + starElement.innerHTML = star.name; detailBoxStars.appendChild(starElement); } } - - // Suggested movies by category - // search movies by genres - // }); diff --git a/style.css b/style.css index 21ba980e..b71d2741 100644 --- a/style.css +++ b/style.css @@ -2,6 +2,7 @@ body { background-color: beige; font-family: Arial, Helvetica, sans-serif; } +#suggestedResultsList, #movieList { display: flex; align-items: center; @@ -30,7 +31,7 @@ label { color: black; display: block; } -div#currentClickedMovieId { +#currentClickedMovieId { /* display: flex; */ display: grid; grid-template-columns: repeat(2, 1fr); From e1e2dbafbd6adf8967d84f3e5f26353511eabdd1 Mon Sep 17 00:00:00 2001 From: elachcdv Date: Wed, 30 Mar 2022 14:34:12 +0200 Subject: [PATCH 04/22] Ordering names variables, ids, classes and suggestions from categories --- index.html | 26 ++++++------- main.js | 111 ++++++++++++++++++++++++++++++----------------------- style.css | 53 +++++++++++++++++-------- 3 files changed, 115 insertions(+), 75 deletions(-) diff --git a/index.html b/index.html index a6497e2b..a044b3e7 100644 --- a/index.html +++ b/index.html @@ -7,34 +7,34 @@ - Movie App + movie app -

Movie App

+

vidget

- + -

movies:

-
-
+

Movies find for you

+
+

- - Collection suggested movies + + Suggested films based on categories

-
+
    + +
    diff --git a/main.js b/main.js index 80297dfa..8f524fa0 100644 --- a/main.js +++ b/main.js @@ -12,30 +12,32 @@ // - wyświetlenie informacjami filmu - lub wyświetlenie ich poniżej bez zmiany url window.addEventListener("DOMContentLoaded", () => { - const apiKey = "k_28x30ddn"; // const apiKey= "k_pgd93xda" - const inputMovieSearch = document.getElementById("searchMovie"); - const searchResultsMovies = document.getElementById("movieList"); - const suggestedResultsList = document.getElementById("suggestedResultsList"); + // const apiKey = "k_pgd93xda"; //second apikey + const apiKey = "k_28x30ddn"; + const inputSearchMovie = document.getElementById("search-movie"); + const searchResultsMovies = document.getElementById("results-movies"); + const genresList = document.getElementById("genres-list"); + const suggestedResultsList = document.getElementById("suggested-results"); const urlAPI = `https://imdb-api.com/en/API/SearchMovie/${apiKey}`; const urlDetailsAPI = `https://imdb-api.com/en/API/Title/${apiKey}`; const advancedSearchUrl = `https://imdb-api.com/API/AdvancedSearch/${apiKey}`; function init() { - inputMovieSearch.addEventListener("keyup", debounce(getMovies, 300)); - + inputSearchMovie.addEventListener("keyup", debounce(getMovies, 300)); + // event listener on click movie id from titles list searchResultsMovies.addEventListener("click", (event) => { - //zamienić na funkcję - powtarza sie const movieID = event.target.closest("a").id; getDetails(movieID); }); + // event listener on click movie id for suggestion movies suggestedResultsList.addEventListener("click", (event) => { - //zamienić na funkcję - powtarza sie powyżej const movieID = event.target.closest("a").id; getDetails(movieID); }); } init(); + // wait for execute function debounce(callback, delay) { let timeout; return function () { @@ -44,9 +46,9 @@ window.addEventListener("DOMContentLoaded", () => { }; } - //search results + // search results async function getMovies(movie) { - const movieValue = inputMovieSearch.value; + const movieValue = inputSearchMovie.value; const results = await fetch(`${urlAPI}/${movieValue}`) .then((response) => response.json()) .then((data) => data.results) @@ -58,25 +60,27 @@ window.addEventListener("DOMContentLoaded", () => { .catch((error) => console.log(error)); } + // create movie list in DOM function createMoviesDOM(movies, htmlTarget) { for (const movie of movies) { const movieElement = document.createElement("div"); - movieElement.classList.add("singleMovieList"); + movieElement.classList.add("selected-movie"); // movieElement.innerHTML = `${movie.title}`; movieElement.innerHTML = `${movie.title}`; // movieElement.innerHTML = `${movie.title}`; movieElement.style.backgroundImage = `url(${movie.image})`; + // movieElement.classList.add("single-movie"); htmlTarget.appendChild(movieElement); } } - // function which get link and create details DOM + // get id from selected movie link and create div with details in DOM async function getDetails(movieId) { const details = await fetch(`${urlDetailsAPI}/${movieId}`) .then((response) => response.json()) .then((data) => { // console.log(data); - //add to DOM div after clicked on link + // add to DOM div after clicked on link createMovieDetailsDom(data); const genres = transformGenresToApiParam(data.genreList); // " " showSuggestions(genres); @@ -84,45 +88,24 @@ window.addEventListener("DOMContentLoaded", () => { // .catch((error) => new Error("Details not found")); } - // suggestions - async function showSuggestions(genres) { - // transformGenresToApiParam(genres); - const suggestions = await fetch(`${advancedSearchUrl}/?genres=${genres}`) - .then((response) => response.json()) - .then((data) => data.results) - .then((data) => { - createMoviesDOM(data, suggestedResultsList); - }); - // .catch((error) => new Error("Details not found")); - } - - function transformGenresToApiParam(genres) { - const currentGenres = genres.map((genre) => { - return genre.value; - }); - return currentGenres.join().toLowerCase(); // "genre1,genre2,genre3" - } - - // function which create details DOM + // create selected from API details of movie in DOM element function createMovieDetailsDom(data) { - const insideDetailBox = document.getElementById("currentClickedMovieId"); + const insideDetailBox = document.getElementById("clicked-movie-id"); + insideDetailBox.classList.add("detail-conatiner"); insideDetailBox.innerHTML = ""; - //image if (data.image) { const detailBoxImage = document.createElement("div"); const title = data.title ? data.title : ""; detailBoxImage.innerHTML = `${title}`; - detailBoxImage.classList.add("currentMovieImage"); + detailBoxImage.classList.add("movie-image"); detailBoxImage.classList.add("box-left"); insideDetailBox.appendChild(detailBoxImage); } - //rightBox const detailBoxRight = document.createElement("div"); detailBoxRight.classList.add("box-right"); insideDetailBox.append(detailBoxRight); - //title if (data.title) { const detailBox = document.createElement("div"); @@ -130,7 +113,6 @@ window.addEventListener("DOMContentLoaded", () => { detailBox.classList.add("singleMovieDetails"); detailBoxRight.appendChild(detailBox); } - //plot if (data.plot) { const detailBoxPlot = document.createElement("p"); @@ -138,7 +120,6 @@ window.addEventListener("DOMContentLoaded", () => { detailBoxPlot.classList.add("plot"); detailBoxRight.appendChild(detailBoxPlot); } - //rating if (data.imDbRating) { const detailBoxRating = document.createElement("p"); @@ -146,7 +127,6 @@ window.addEventListener("DOMContentLoaded", () => { detailBoxRating.classList.add("rating"); detailBoxRight.appendChild(detailBoxRating); } - // year if (data.year) { const detailBoxYear = document.createElement("p"); @@ -154,8 +134,7 @@ window.addEventListener("DOMContentLoaded", () => { detailBoxYear.classList.add("year"); detailBoxRight.appendChild(detailBoxYear); } - - // genre + // genres if (data.genres) { const detailBoxGenres = document.createElement("p"); detailBoxGenres.innerHTML = `${data.genres}`; @@ -163,7 +142,10 @@ window.addEventListener("DOMContentLoaded", () => { detailBoxGenres.id = "genres"; detailBoxRight.appendChild(detailBoxGenres); } - + // list genres + if (data.genreList) { + createGenresDom(data.genreList, genresList); + } // languages if (data.languages) { const detailBoxLanguages = document.createElement("p"); @@ -171,21 +153,20 @@ window.addEventListener("DOMContentLoaded", () => { detailBoxLanguages.classList.add("movie-languages"); detailBoxRight.appendChild(detailBoxLanguages); } - //stars - create ul if (data.starList) { createStars(data.starList, detailBoxRight); } - //runtimeStr if (data.runtimeStr) { const detailBoxRuntimeStr = document.createElement("p"); detailBoxRuntimeStr.innerHTML = `${data.runtimeStr}`; - detailBoxRuntimeStr.classList.add("runtimeStr"); + detailBoxRuntimeStr.classList.add("runtime-str"); detailBoxRight.appendChild(detailBoxRuntimeStr); } } + // list with stars from movie - create list in DOM function createStars(stars, box) { const detailBoxStars = document.createElement("ul"); detailBoxStars.classList.add("stars"); @@ -197,4 +178,40 @@ window.addEventListener("DOMContentLoaded", () => { detailBoxStars.appendChild(starElement); } } + + //add to DOM div after clicked on selected movie + // suggestions + async function showSuggestions(genres) { + // transformGenresToApiParam(genres); + const suggestions = await fetch(`${advancedSearchUrl}/?genres=${genres}`) + .then((response) => response.json()) + .then((data) => data.results) + .then((data) => { + // create element in DOM with genres which was selected to suggestions + createMoviesDOM(data, suggestedResultsList); + }); + // .catch((error) => new Error("Details not found")); + } + + // transform genres to api param + function transformGenresToApiParam(genres) { + const forSuggestionsGenres = genres.map((genre) => { + return genre.value; + }); + return forSuggestionsGenres.join().toLowerCase(); // "genre1,genre2,genre3" + } + + // create div with genres in DOM + function createGenresDom(genres) { + const genresElement = document.getElementById("genres-list"); + genresElement.classList.add("genres-suggestions"); + genresElement.innerHTML = ""; + for (const genre of genres) { + const genreElement = document.createElement("li"); + genreElement.classList.add("single-genre"); + genreElement.innerHTML = `${genre.value}`; + genresElement.appendChild(genreElement); + } + // genresList.appendChild(genresElement); + } }); diff --git a/style.css b/style.css index b71d2741..484e2272 100644 --- a/style.css +++ b/style.css @@ -2,8 +2,22 @@ body { background-color: beige; font-family: Arial, Helvetica, sans-serif; } -#suggestedResultsList, -#movieList { +a { + cursor: pointer; +} +label { + font-size: 1.5em; + color: black; + display: block; +} +input { + font-size: 1.5em; + /* font-weight: bold; */ + color: black; + display: block; +} +.results-movies, +.results-genres { display: flex; align-items: center; justify-content: space-between; @@ -11,28 +25,24 @@ body { flex-direction: row; flex-wrap: wrap; } -.singleMovieList { +.selected-movie { width: 200px; height: 200px; - background: lightgray; display: flex; align-items: center; justify-content: center; align-content: center; flex-direction: row; - /* background styling */ background-size: contain; background-repeat: no-repeat; background-position: center; } -label { - font-size: 1.5em; - font-weight: bold; - color: black; - display: block; +.selected-movie a { + height: 100%; + width: 100%; + font-size: 0px; } -#currentClickedMovieId { - /* display: flex; */ +.detail-conatiner { display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 30px; @@ -41,19 +51,32 @@ label { height: 100%; padding: 20px; margin: 50px auto; - /* background-color: rgb(245, 241, 241); */ } -.currentMovieImage img { +.movie-image img { width: 100%; height: 100%; } .box-left, .box-right { - /* border: 2px solid red; */ height: auto; float: left; background-color: rgb(245, 241, 241); } .box-right { padding: 20px; +} +/* suggestions */ +.genres-suggestions { + list-style: none; + display: flex; + justify-content: space-evenly; + align-items: center; + flex-direction: row; + margin: 50px auto; +} +li.single-genre { + background: black; + color: white; + padding: 10px 50px; + border-radius: 9px; } \ No newline at end of file From cb483a3206fe72389b830b11bac1b2a42dddb097 Mon Sep 17 00:00:00 2001 From: elachcdv Date: Wed, 6 Apr 2022 11:15:44 +0200 Subject: [PATCH 05/22] edit rating, add trailer detail, create function for clear html results --- main.js | 47 +++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 39 insertions(+), 8 deletions(-) diff --git a/main.js b/main.js index 8f524fa0..b47a9a76 100644 --- a/main.js +++ b/main.js @@ -14,6 +14,7 @@ window.addEventListener("DOMContentLoaded", () => { // const apiKey = "k_pgd93xda"; //second apikey const apiKey = "k_28x30ddn"; + const insideDetailBox = document.getElementById("clicked-movie-id"); const inputSearchMovie = document.getElementById("search-movie"); const searchResultsMovies = document.getElementById("results-movies"); const genresList = document.getElementById("genres-list"); @@ -46,16 +47,23 @@ window.addEventListener("DOMContentLoaded", () => { }; } + // clear html target + function clearHtml(target) { + target.innerHTML = ""; + } + // search results async function getMovies(movie) { const movieValue = inputSearchMovie.value; const results = await fetch(`${urlAPI}/${movieValue}`) .then((response) => response.json()) .then((data) => data.results) - .then((data) => { + .then((results) => { // console.log(data); // return results in console; + //add pagintion // add to DOM - createMoviesDOM(data, searchResultsMovies); + clearHtml(searchResultsMovies); + createMoviesDOM(results, searchResultsMovies); }) .catch((error) => console.log(error)); } @@ -81,6 +89,7 @@ window.addEventListener("DOMContentLoaded", () => { .then((data) => { // console.log(data); // add to DOM div after clicked on link + clearHtml(insideDetailBox); createMovieDetailsDom(data); const genres = transformGenresToApiParam(data.genreList); // " " showSuggestions(genres); @@ -90,9 +99,9 @@ window.addEventListener("DOMContentLoaded", () => { // create selected from API details of movie in DOM element function createMovieDetailsDom(data) { - const insideDetailBox = document.getElementById("clicked-movie-id"); + // const insideDetailBox = document.getElementById("clicked-movie-id"); insideDetailBox.classList.add("detail-conatiner"); - insideDetailBox.innerHTML = ""; + // insideDetailBox.innerHTML = ""; //image if (data.image) { const detailBoxImage = document.createElement("div"); @@ -110,7 +119,7 @@ window.addEventListener("DOMContentLoaded", () => { if (data.title) { const detailBox = document.createElement("div"); detailBox.innerHTML = `${data.title}`; - detailBox.classList.add("singleMovieDetails"); + detailBox.classList.add("title"); detailBoxRight.appendChild(detailBox); } //plot @@ -122,15 +131,19 @@ window.addEventListener("DOMContentLoaded", () => { } //rating if (data.imDbRating) { + const ratingIMDb = document.createElement("p"); + ratingIMDb.innerHTML = `IMDb Rating`; + ratingIMDb.classList.add("rating-title"); + detailBoxRight.appendChild(ratingIMDb); const detailBoxRating = document.createElement("p"); - detailBoxRating.innerHTML = `${data.imDbRating}`; + detailBoxRating.innerHTML = `${data.imDbRating} / 10`; detailBoxRating.classList.add("rating"); detailBoxRight.appendChild(detailBoxRating); } // year if (data.year) { const detailBoxYear = document.createElement("p"); - detailBoxYear.innerHTML = `${data.year}`; + detailBoxYear.innerHTML = `Year: ${data.year}`; detailBoxYear.classList.add("year"); detailBoxRight.appendChild(detailBoxYear); } @@ -157,6 +170,13 @@ window.addEventListener("DOMContentLoaded", () => { if (data.starList) { createStars(data.starList, detailBoxRight); } + //awards + if (data.awards) { + const detailBoxAwards = document.createElement("p"); + detailBoxAwards.innerHTML = `${data.awards}`; + detailBoxAwards.classList.add("movie-awards"); + detailBoxRight.appendChild(detailBoxAwards); + } //runtimeStr if (data.runtimeStr) { const detailBoxRuntimeStr = document.createElement("p"); @@ -164,6 +184,13 @@ window.addEventListener("DOMContentLoaded", () => { detailBoxRuntimeStr.classList.add("runtime-str"); detailBoxRight.appendChild(detailBoxRuntimeStr); } + //trailer + if (data.trailer) { + const detailBoxTrailer = document.createElement("a"); + detailBoxTrailer.innerHTML = `${data.trailer}`; + detailBoxTrailer.classList.add("trailer"); + detailBoxRight.appendChild(detailBoxTrailer); + } } // list with stars from movie - create list in DOM @@ -179,7 +206,7 @@ window.addEventListener("DOMContentLoaded", () => { } } - //add to DOM div after clicked on selected movie + //add to DOM div after clicked on link form suggested movies // suggestions async function showSuggestions(genres) { // transformGenresToApiParam(genres); @@ -206,6 +233,8 @@ window.addEventListener("DOMContentLoaded", () => { const genresElement = document.getElementById("genres-list"); genresElement.classList.add("genres-suggestions"); genresElement.innerHTML = ""; + // genresElement.classList.add("genres"); + // genresElement.innerHTML = `

    Suggestes movies from Genres:

    `; for (const genre of genres) { const genreElement = document.createElement("li"); genreElement.classList.add("single-genre"); @@ -214,4 +243,6 @@ window.addEventListener("DOMContentLoaded", () => { } // genresList.appendChild(genresElement); } + + // maybe add pagination for search results }); From 974ca0837d76d365358c010049eb109823300133 Mon Sep 17 00:00:00 2001 From: elachcdv Date: Thu, 7 Apr 2022 14:53:40 +0200 Subject: [PATCH 06/22] start pagination, style movie details, add module scripts --- index.html | 11 ++++++++++- main.js | 24 +++++++++++++++++++----- pagination.js | 37 +++++++++++++++++++++++++++++++++++++ style.css | 48 ++++++++++++++++++++++++++++++++++++++++++++++-- 4 files changed, 112 insertions(+), 8 deletions(-) create mode 100644 pagination.js diff --git a/index.html b/index.html index a044b3e7..4f1367b7 100644 --- a/index.html +++ b/index.html @@ -26,6 +26,14 @@

    vidget

    Movies find for you

    + + + pages +
    + of +
    + +

    @@ -37,6 +45,7 @@

    - + + diff --git a/main.js b/main.js index b47a9a76..381cd398 100644 --- a/main.js +++ b/main.js @@ -1,4 +1,3 @@ -"use strict"; // imdb API // przykładowy link // "https://imdb-api.com/en/API/Title/k_1234567/..." @@ -11,6 +10,9 @@ // - za pomocą ID filmu znajdujacego się w repsonse dodanie dodatkowych informacji oraz linku do tych informacji // - wyświetlenie informacjami filmu - lub wyświetlenie ich poniżej bez zmiany url +"use strict"; +import loadPaging from "./pagination.js"; + window.addEventListener("DOMContentLoaded", () => { // const apiKey = "k_pgd93xda"; //second apikey const apiKey = "k_28x30ddn"; @@ -59,11 +61,15 @@ window.addEventListener("DOMContentLoaded", () => { .then((response) => response.json()) .then((data) => data.results) .then((results) => { - // console.log(data); // return results in console; - //add pagintion + // console.log(results); // return results in console; + // add pagintion // add to DOM clearHtml(searchResultsMovies); - createMoviesDOM(results, searchResultsMovies); + loadPaging(results.length, (pagingOptions) => { + // how to prevent paginate if (results.length <= 0) + const newArray = pageArraySplit(results, pagingOptions); + createMoviesDOM(newArray, searchResultsMovies); + }); }) .catch((error) => console.log(error)); } @@ -244,5 +250,13 @@ window.addEventListener("DOMContentLoaded", () => { // genresList.appendChild(genresElement); } - // maybe add pagination for search results + // pagination for search results + function pageArraySplit(array, pagingOptions) { + const currentPageNumber = pagingOptions.currentPageNumber; + const perPage = pagingOptions.perPage; + const startingIndex = (currentPageNumber - 1) * perPage; + const endingIndex = startingIndex + perPage; + + return array.slice(startingIndex, endingIndex); + } }); diff --git a/pagination.js b/pagination.js new file mode 100644 index 00000000..be216e38 --- /dev/null +++ b/pagination.js @@ -0,0 +1,37 @@ +const previousButton = document.getElementById("previous"); +const nextButton = document.getElementById("next"); +const currentPage = document.getElementById("current-page"); +const totalPages = document.getElementById("total-pages"); +const PER_PAGE = 5; + +let currentPageNumber = 1; +previousButton.disabled = currentPageNumber === 1; +currentPage.textContent = currentPageNumber; + +export default function loadPaging(totalItems, callback) { + const totalPageCount = Math.ceil(totalItems / PER_PAGE); + totalPages.textContent = totalPageCount; + + function updatePaging() { + currentPage.textContent = currentPageNumber; + const pagingOptions = { + currentPageNumber: currentPageNumber, + perPage: PER_PAGE, + }; + callback(pagingOptions); + nextButton.disabled = currentPageNumber === totalPageCount; + previousButton.disabled = currentPageNumber === 1; + } + + updatePaging(); + + nextButton.addEventListener("click", () => { + currentPageNumber++; + updatePaging(); + }); + + previousButton.addEventListener("click", () => { + currentPageNumber--; + updatePaging(); + }); +} diff --git a/style.css b/style.css index 484e2272..e0081522 100644 --- a/style.css +++ b/style.css @@ -4,6 +4,8 @@ body { } a { cursor: pointer; + /* height: 100%; + width: 100%; */ } label { font-size: 1.5em; @@ -51,9 +53,12 @@ input { height: 100%; padding: 20px; margin: 50px auto; + justify-items: center; } .movie-image img { - width: 100%; + max-height: 700px; + width: auto; + /* width: 100%; */ height: 100%; } .box-left, @@ -63,7 +68,37 @@ input { background-color: rgb(245, 241, 241); } .box-right { - padding: 20px; + padding: 50px; + max-width: 600px; +} +/* DETAILS MOVIE */ +/* rating */ +.title { + font-size: 2em; + color: black; + font-weight: bold; +} +.rating { + font-size: 2em; + font-weight: 900; + margin: 0; +} +.rating::before { + content: "\2605"; + color: goldenrod; + margin-right: 10px; +} +.rating-title { + font-size: 1em; + font-weight: bold; + color: black; + margin: 20px 0 0 0; +} +/* awards */ +.movie-awards { + font-size: 1.5em; + color: black; + margin: 0; } /* suggestions */ .genres-suggestions { @@ -79,4 +114,13 @@ li.single-genre { color: white; padding: 10px 50px; border-radius: 9px; +} + +/* pagination */ +.next-btn, +.prev-btn { + width: 20px; + height: 20px; + background-color: black; + color: white; } \ No newline at end of file From b7724b0af521844bb5fb68ad3474bf2091ba52e2 Mon Sep 17 00:00:00 2001 From: elachcdv Date: Fri, 8 Apr 2022 17:36:41 +0200 Subject: [PATCH 07/22] working pagination for movies results, start working with loader, edit styles --- index.html | 5 +++ main.js | 7 ++-- pagination.js | 9 ++--- style.css | 108 +++++++++++++++++++++++++++++++++++++++++++++++++- 4 files changed, 118 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 4f1367b7..5c1d89d5 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,11 @@

    vidget

    +
    +
    +
    +
    +
    diff --git a/main.js b/main.js index 381cd398..f0d244f0 100644 --- a/main.js +++ b/main.js @@ -61,12 +61,11 @@ window.addEventListener("DOMContentLoaded", () => { .then((response) => response.json()) .then((data) => data.results) .then((results) => { - // console.log(results); // return results in console; + console.log(results); // return results in console; // add pagintion - // add to DOM - clearHtml(searchResultsMovies); loadPaging(results.length, (pagingOptions) => { - // how to prevent paginate if (results.length <= 0) + // add to DOM + clearHtml(searchResultsMovies); const newArray = pageArraySplit(results, pagingOptions); createMoviesDOM(newArray, searchResultsMovies); }); diff --git a/pagination.js b/pagination.js index be216e38..175f26bb 100644 --- a/pagination.js +++ b/pagination.js @@ -1,14 +1,14 @@ +"use strict"; const previousButton = document.getElementById("previous"); const nextButton = document.getElementById("next"); const currentPage = document.getElementById("current-page"); const totalPages = document.getElementById("total-pages"); const PER_PAGE = 5; -let currentPageNumber = 1; -previousButton.disabled = currentPageNumber === 1; -currentPage.textContent = currentPageNumber; - export default function loadPaging(totalItems, callback) { + let currentPageNumber = 1; + previousButton.disabled = currentPageNumber === 1; + currentPage.textContent = currentPageNumber; const totalPageCount = Math.ceil(totalItems / PER_PAGE); totalPages.textContent = totalPageCount; @@ -22,7 +22,6 @@ export default function loadPaging(totalItems, callback) { nextButton.disabled = currentPageNumber === totalPageCount; previousButton.disabled = currentPageNumber === 1; } - updatePaging(); nextButton.addEventListener("click", () => { diff --git a/style.css b/style.css index e0081522..c8a2c1cb 100644 --- a/style.css +++ b/style.css @@ -1,12 +1,19 @@ body { - background-color: beige; + background-color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; + color: white; + text-align: center; + margin: 0 auto; + /* vertical-align: middle; */ + height: 100vh; + width: 100vw; } a { cursor: pointer; /* height: 100%; width: 100%; */ } +/* input */ label { font-size: 1.5em; color: black; @@ -14,10 +21,52 @@ label { } input { font-size: 1.5em; + margin: 0 auto; + text-align: center; /* font-weight: bold; */ color: black; display: block; } +/* end input */ +/* loader */ +.loader-wrapper { + width: 60px; + height: 60px; + margin: 0 auto; + } + + .loader { + box-sizing: border-box; + width: 100%; + height: 100%; + border: 10px solid #162534; + border-top-color: #46a2bb; + border-bottom-color: #a52ec6; + border-radius: 50%; + animation: rotate0925 5s linear infinite; + } + + .loader-inner { + border-top-color: #f338d4; + border-bottom-color: #fff; + animation-duration: 2.5s; + } + + @keyframes rotate0925 { + 0% { + transform: scale(1) rotate(360deg); + } + + 50% { + transform: scale(.8) rotate(-360deg); + } + + 100% { + transform: scale(1) rotate(360deg); + } + } +/* end loader */ + .results-movies, .results-genres { display: flex; @@ -123,4 +172,59 @@ li.single-genre { height: 20px; background-color: black; color: white; -} \ No newline at end of file +} +.next-btn, +.prev-btn, +div#current-page, +div#total-pages { + display: inline-block; +} + +button { + --glow-color: rgb(217, 176, 255); + --glow-spread-color: rgba(191, 123, 255, 0.781); + --enhanced-glow-color: rgb(231, 206, 255); + --btn-color: rgb(100, 61, 136); + border: .25em solid var(--glow-color); + padding: 1em 3em; + color: var(--glow-color); + font-size: 15px; + font-weight: bold; + background-color: var(--btn-color); + border-radius: 1em; + outline: none; + box-shadow: 0 0 1em .25em var(--glow-color), + 0 0 4em 1em var(--glow-spread-color), + inset 0 0 .75em .25em var(--glow-color); + text-shadow: 0 0 .5em var(--glow-color); + position: relative; + transition: all 0.3s; + } + + button::after { + pointer-events: none; + content: ""; + position: absolute; + top: 120%; + left: 0; + height: 100%; + width: 100%; + background-color: var(--glow-spread-color); + filter: blur(2em); + opacity: .7; + transform: perspective(1.5em) rotateX(35deg) scale(1, .6); + } + + button:hover { + color: var(--btn-color); + background-color: var(--glow-color); + box-shadow: 0 0 1em .25em var(--glow-color), + 0 0 4em 2em var(--glow-spread-color), + inset 0 0 .75em .25em var(--glow-color); + } + + button:active { + box-shadow: 0 0 0.6em .25em var(--glow-color), + 0 0 2.5em 2em var(--glow-spread-color), + inset 0 0 .5em .25em var(--glow-color); + } \ No newline at end of file From 278b548baa7d0dec0387a35017627955bee3f3e4 Mon Sep 17 00:00:00 2001 From: elachcdv Date: Fri, 8 Apr 2022 18:02:05 +0200 Subject: [PATCH 08/22] styles for suggested categories, and selected movie --- style.css | 34 ++++++++++++++++++++++++++-------- 1 file changed, 26 insertions(+), 8 deletions(-) diff --git a/style.css b/style.css index c8a2c1cb..a0bacce2 100644 --- a/style.css +++ b/style.css @@ -105,16 +105,16 @@ input { justify-items: center; } .movie-image img { - max-height: 700px; + max-height: 600px; width: auto; /* width: 100%; */ - height: 100%; + /* height: 100%; */ } .box-left, .box-right { height: auto; float: left; - background-color: rgb(245, 241, 241); + /* background-color: rgb(245, 241, 241); */ } .box-right { padding: 50px; @@ -124,7 +124,7 @@ input { /* rating */ .title { font-size: 2em; - color: black; + /* color: black; */ font-weight: bold; } .rating { @@ -140,13 +140,13 @@ input { .rating-title { font-size: 1em; font-weight: bold; - color: black; + /* color: black; */ margin: 20px 0 0 0; } /* awards */ .movie-awards { font-size: 1.5em; - color: black; + /* color: black; */ margin: 0; } /* suggestions */ @@ -158,11 +158,29 @@ input { flex-direction: row; margin: 50px auto; } -li.single-genre { +.single-genre { background: black; color: white; padding: 10px 50px; border-radius: 9px; + --glow-color: rgb(181, 251, 168); + --glow-spread-color: rgba(123, 255, 127, 0.781); + --enhanced-glow-color: rgb(231, 206, 255); + --btn-color: rgb(11, 123, 5); + border: .25em solid var(--glow-color); + padding: 1em 3em; + color: var(--glow-color); + font-size: 15px; + font-weight: bold; + background-color: var(--btn-color); + border-radius: 1em; + outline: none; + box-shadow: 0 0 1em .25em var(--glow-color), + 0 0 4em 1em var(--glow-spread-color), + inset 0 0 .75em .25em var(--glow-color); + text-shadow: 0 0 .5em var(--glow-color); + position: relative; + transition: all 0.3s; } /* pagination */ @@ -179,7 +197,7 @@ div#current-page, div#total-pages { display: inline-block; } - + button { --glow-color: rgb(217, 176, 255); --glow-spread-color: rgba(191, 123, 255, 0.781); From f17a58cbc7de5cf84cb2ca3f0ea9bd5257d6cd3b Mon Sep 17 00:00:00 2001 From: elachcdv Date: Mon, 25 Apr 2022 13:55:33 +0200 Subject: [PATCH 09/22] styling app, add pagination to suggestions, add scrolling --- cinema.jpg | Bin 0 -> 20731 bytes index.html | 47 ++++++++------ loader.css | 60 ++++++++++++++++++ main.js | 44 +++++++++---- pagination-suggestions.js | 36 +++++++++++ scrolling.js | 8 +++ style.css | 129 ++++++++++++++------------------------ 7 files changed, 210 insertions(+), 114 deletions(-) create mode 100644 cinema.jpg create mode 100644 loader.css create mode 100644 pagination-suggestions.js create mode 100644 scrolling.js diff --git a/cinema.jpg b/cinema.jpg new file mode 100644 index 0000000000000000000000000000000000000000..adbf5e5992370881e9651224047f344539c95eb9 GIT binary patch literal 20731 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 literal 0 HcmV?d00001 diff --git a/index.html b/index.html index 5c1d89d5..7c059e3b 100644 --- a/index.html +++ b/index.html @@ -11,46 +11,53 @@ -

    vidget

    -
    -
    -
    -
    -
    +

    + Find.
    + Watch.
    + Movie. +

    - + + -

    Movies find for you

    - - pages -
    - of -
    - +
    + + page +
    + of +
    + +
    -

    - - Suggested films based on categories -

    +
      - +
      + + page +
      + of +
      + +
      + + + diff --git a/loader.css b/loader.css new file mode 100644 index 00000000..34162b32 --- /dev/null +++ b/loader.css @@ -0,0 +1,60 @@ +.loader { + color: #fff; + font-size: 10px; + width: 1em; + height: 1em; + border-radius: 50%; + position: relative; + text-indent: -9999em; + animation: mulShdSpin 1.3s infinite linear; + transform: translateZ(0); + } + + @keyframes mulShdSpin { + 0%, + 100% { + box-shadow: 0 -3em 0 0.2em, + 2em -2em 0 0em, 3em 0 0 -1em, + 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 -1em, -3em 0 0 -1em, + -2em -2em 0 0; + } + 12.5% { + box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, + 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 -1em, -3em 0 0 -1em, + -2em -2em 0 -1em; + } + 25% { + box-shadow: 0 -3em 0 -0.5em, + 2em -2em 0 0, 3em 0 0 0.2em, + 2em 2em 0 0, 0 3em 0 -1em, + -2em 2em 0 -1em, -3em 0 0 -1em, + -2em -2em 0 -1em; + } + 37.5% { + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, + 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, + -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em; + } + 50% { + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, + 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, + -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em; + } + 62.5% { + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, + 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, + -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em; + } + 75% { + box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, + 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0; + } + 87.5% { + box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, + 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, + -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em; + } + } \ No newline at end of file diff --git a/main.js b/main.js index f0d244f0..04f892ff 100644 --- a/main.js +++ b/main.js @@ -12,10 +12,13 @@ "use strict"; import loadPaging from "./pagination.js"; +import loadPagingSuggestions from "./pagination-suggestions.js"; +import scrollToDetailBox from "./scrolling.js"; window.addEventListener("DOMContentLoaded", () => { - // const apiKey = "k_pgd93xda"; //second apikey - const apiKey = "k_28x30ddn"; + const apiKey = "k_pgd93xda"; //second apikey + // const apiKey = "k_28x30ddn"; + //const apiKey = "k_n2nfzz4l"; const insideDetailBox = document.getElementById("clicked-movie-id"); const inputSearchMovie = document.getElementById("search-movie"); const searchResultsMovies = document.getElementById("results-movies"); @@ -25,17 +28,24 @@ window.addEventListener("DOMContentLoaded", () => { const urlDetailsAPI = `https://imdb-api.com/en/API/Title/${apiKey}`; const advancedSearchUrl = `https://imdb-api.com/API/AdvancedSearch/${apiKey}`; + window.onload = function () { + document.getElementById("pagination-results").style.display = "none"; + document.getElementById("pagination-suggestions").style.display = "none"; + }; + function init() { inputSearchMovie.addEventListener("keyup", debounce(getMovies, 300)); // event listener on click movie id from titles list - searchResultsMovies.addEventListener("click", (event) => { + searchResultsMovies.addEventListener("click", async (event) => { const movieID = event.target.closest("a").id; - getDetails(movieID); + await getDetails(movieID); + scrollToDetailBox(); }); - // event listener on click movie id for suggestion movies - suggestedResultsList.addEventListener("click", (event) => { + // event listener on click movie id for genres movies + suggestedResultsList.addEventListener("click", async (event) => { const movieID = event.target.closest("a").id; - getDetails(movieID); + await getDetails(movieID); + scrollToDetailBox(); }); } init(); @@ -61,10 +71,10 @@ window.addEventListener("DOMContentLoaded", () => { .then((response) => response.json()) .then((data) => data.results) .then((results) => { - console.log(results); // return results in console; // add pagintion + document.getElementById("pagination-results").style.display = "block"; + // clearHtml(searchResultsMovies); loadPaging(results.length, (pagingOptions) => { - // add to DOM clearHtml(searchResultsMovies); const newArray = pageArraySplit(results, pagingOptions); createMoviesDOM(newArray, searchResultsMovies); @@ -98,6 +108,7 @@ window.addEventListener("DOMContentLoaded", () => { createMovieDetailsDom(data); const genres = transformGenresToApiParam(data.genreList); // " " showSuggestions(genres); + // scrollToDetailBox(); }); // .catch((error) => new Error("Details not found")); } @@ -212,17 +223,24 @@ window.addEventListener("DOMContentLoaded", () => { } //add to DOM div after clicked on link form suggested movies - // suggestions + // suggestions - list of genres async function showSuggestions(genres) { // transformGenresToApiParam(genres); const suggestions = await fetch(`${advancedSearchUrl}/?genres=${genres}`) .then((response) => response.json()) .then((data) => data.results) - .then((data) => { + .then((results) => { // create element in DOM with genres which was selected to suggestions - createMoviesDOM(data, suggestedResultsList); + document.getElementById("pagination-suggestions").style.display = + "block"; + // createMoviesDOM(data, suggestedResultsList); + loadPagingSuggestions(results.length, (pagingOptions) => { + clearHtml(suggestedResultsList); + const newArray = pageArraySplit(results, pagingOptions); + createMoviesDOM(newArray, suggestedResultsList); + }); + // .catch((error) => new Error("Details not found")); }); - // .catch((error) => new Error("Details not found")); } // transform genres to api param diff --git a/pagination-suggestions.js b/pagination-suggestions.js new file mode 100644 index 00000000..25cb5bfa --- /dev/null +++ b/pagination-suggestions.js @@ -0,0 +1,36 @@ +"use strict"; +const prevBtn = document.getElementById("prev-btn"); +const nextBtn = document.getElementById("next-btn"); +const curPage = document.getElementById("cur-page"); +const totPages = document.getElementById("tot-pages"); +const PER_PAGE = 5; + +export default function loadPagingSuggestions(totalItems, callback) { + let currentPageNumber = 1; + prevBtn.disabled = currentPageNumber === 1; + curPage.textContent = currentPageNumber; + const totalPageCount = Math.ceil(totalItems / PER_PAGE); + totPages.textContent = totalPageCount; + + function updatePaging() { + curPage.textContent = currentPageNumber; + const pagingOptions = { + currentPageNumber: currentPageNumber, + perPage: PER_PAGE, + }; + callback(pagingOptions); + nextBtn.disabled = currentPageNumber === totalPageCount; + prevBtn.disabled = currentPageNumber === 1; + } + updatePaging(); + + nextBtn.addEventListener("click", () => { + currentPageNumber++; + updatePaging(); + }); + + prevBtn.addEventListener("click", () => { + currentPageNumber--; + updatePaging(); + }); +} diff --git a/scrolling.js b/scrolling.js new file mode 100644 index 00000000..d6e40a11 --- /dev/null +++ b/scrolling.js @@ -0,0 +1,8 @@ +//on click id selected-movie scroll to div with id = click-movie +export default function scrollToDetailBox() { + const clickedMovie = document.getElementById("clicked-movie-id"); + clickedMovie.scrollIntoView({ + behavior: "smooth", + block: "start", + }); +} diff --git a/style.css b/style.css index a0bacce2..1fd9e23a 100644 --- a/style.css +++ b/style.css @@ -1,6 +1,6 @@ body { background-color: rgb(0, 0, 0); - font-family: Arial, Helvetica, sans-serif; + font-family: 'Montserrat', sans-serif; color: white; text-align: center; margin: 0 auto; @@ -13,6 +13,19 @@ a { /* height: 100%; width: 100%; */ } +h1 { + font-size: 120px; + font-weight: 700; + background-clip: text; + -webkit-background-clip: text; + color: transparent; + line-height: 1; + text-transform: uppercase; + font-family: 'Inter', sans-serif; + font-weight: 900; + background-image: linear-gradient(0deg, rgba(255, 0, 150, 0.15), rgba(255, 0, 150, 0.15)), url(/cinema.jpg); + background-size: cover; +} /* input */ label { font-size: 1.5em; @@ -20,65 +33,36 @@ label { display: block; } input { - font-size: 1.5em; - margin: 0 auto; + font-size: 1.2em; + margin: 0 auto 100px auto; + padding: 20px 50px; + background: black; text-align: center; - /* font-weight: bold; */ - color: black; + color: rgb(212, 212, 212); display: block; + border: 1px solid #170f32; + box-shadow: 1px 3px 55px 3px #3e268d; + border-radius: 10px; +} +input:focus { + outline: none; } /* end input */ -/* loader */ -.loader-wrapper { - width: 60px; - height: 60px; - margin: 0 auto; - } - - .loader { - box-sizing: border-box; - width: 100%; - height: 100%; - border: 10px solid #162534; - border-top-color: #46a2bb; - border-bottom-color: #a52ec6; - border-radius: 50%; - animation: rotate0925 5s linear infinite; - } - - .loader-inner { - border-top-color: #f338d4; - border-bottom-color: #fff; - animation-duration: 2.5s; - } - - @keyframes rotate0925 { - 0% { - transform: scale(1) rotate(360deg); - } - - 50% { - transform: scale(.8) rotate(-360deg); - } - - 100% { - transform: scale(1) rotate(360deg); - } - } -/* end loader */ - +.results-movies { + margin-bottom: 50px; +} .results-movies, .results-genres { display: flex; align-items: center; - justify-content: space-between; + justify-content: space-evenly; align-content: center; flex-direction: row; flex-wrap: wrap; } .selected-movie { - width: 200px; - height: 200px; + margin: 10px auto; + border-radius: 10px; display: flex; align-items: center; justify-content: center; @@ -89,32 +73,33 @@ input { background-position: center; } .selected-movie a { - height: 100%; - width: 100%; + width: 150px; + height: 200px; + border-radius: 10px; + /* height: 100%; + width: 100%; */ font-size: 0px; } .detail-conatiner { + max-width: 1100px; display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 30px; grid-row-gap: 30px; text-align: justify; - height: 100%; - padding: 20px; - margin: 50px auto; + margin: 100px auto; justify-items: center; + align-items: center; } .movie-image img { + border-radius: 15px; max-height: 600px; - width: auto; - /* width: 100%; */ - /* height: 100%; */ + width: 100%;; } .box-left, .box-right { height: auto; float: left; - /* background-color: rgb(245, 241, 241); */ } .box-right { padding: 50px; @@ -124,7 +109,6 @@ input { /* rating */ .title { font-size: 2em; - /* color: black; */ font-weight: bold; } .rating { @@ -140,14 +124,13 @@ input { .rating-title { font-size: 1em; font-weight: bold; - /* color: black; */ margin: 20px 0 0 0; } /* awards */ .movie-awards { - font-size: 1.5em; - /* color: black; */ - margin: 0; + font-size: 1.1em; + /* margin: 0; */ + font-weight: bold; } /* suggestions */ .genres-suggestions { @@ -163,24 +146,6 @@ input { color: white; padding: 10px 50px; border-radius: 9px; - --glow-color: rgb(181, 251, 168); - --glow-spread-color: rgba(123, 255, 127, 0.781); - --enhanced-glow-color: rgb(231, 206, 255); - --btn-color: rgb(11, 123, 5); - border: .25em solid var(--glow-color); - padding: 1em 3em; - color: var(--glow-color); - font-size: 15px; - font-weight: bold; - background-color: var(--btn-color); - border-radius: 1em; - outline: none; - box-shadow: 0 0 1em .25em var(--glow-color), - 0 0 4em 1em var(--glow-spread-color), - inset 0 0 .75em .25em var(--glow-color); - text-shadow: 0 0 .5em var(--glow-color); - position: relative; - transition: all 0.3s; } /* pagination */ @@ -194,10 +159,12 @@ input { .next-btn, .prev-btn, div#current-page, -div#total-pages { +div#total-pages, +div#tot-pages, +div#cur-page { display: inline-block; } - +/* buttons for paginations */ button { --glow-color: rgb(217, 176, 255); --glow-spread-color: rgba(191, 123, 255, 0.781); From cd83bd049f0f68599ca24e495cb7711c51ebbf0e Mon Sep 17 00:00:00 2001 From: elachcdv Date: Fri, 13 May 2022 21:43:58 +0200 Subject: [PATCH 10/22] add loader and modifying styles --- index.html | 31 +++++++++++++++------- loader.css | 12 +++++++++ main.js | 78 +++++++++++++++++++++++++++--------------------------- style.css | 32 +++++++++++++--------- 4 files changed, 92 insertions(+), 61 deletions(-) diff --git a/index.html b/index.html index 7c059e3b..33da91a7 100644 --- a/index.html +++ b/index.html @@ -6,29 +6,36 @@ + + movie app

      Find.
      - Watch.
      - Movie. + Movie.
      + Watch.

      - - + - - - -
      + +
      +
      +
      Loading...
      +
      +
      +
      @@ -44,7 +51,12 @@

        -
        +
        +
        +
        Loading...
        +
        +
        +
        @@ -58,6 +70,5 @@

        - diff --git a/loader.css b/loader.css index 34162b32..385ccf3d 100644 --- a/loader.css +++ b/loader.css @@ -1,4 +1,16 @@ +.loader-container { + display: none; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.1); +} +.loader-container.visible { + min-height: 300px; + display: flex; + justify-content: center; +} .loader { + position: absolute; color: #fff; font-size: 10px; width: 1em; diff --git a/main.js b/main.js index 04f892ff..fa233ba0 100644 --- a/main.js +++ b/main.js @@ -1,15 +1,3 @@ -// imdb API -// przykładowy link -// "https://imdb-api.com/en/API/Title/k_1234567/..." - -// - znaleźć film - wpisanie w input tytułu filmu, odczytywanie value - search + debounce (poczekać np. 300ms) -// - przycisk szukaj wyzwala akcję szukania w api -> async f() fetch -// - szukanie w movie -// - wyświetlenie nazwy img i linku do filmu / ów - -// - za pomocą ID filmu znajdujacego się w repsonse dodanie dodatkowych informacji oraz linku do tych informacji -// - wyświetlenie informacjami filmu - lub wyświetlenie ich poniżej bez zmiany url - "use strict"; import loadPaging from "./pagination.js"; import loadPagingSuggestions from "./pagination-suggestions.js"; @@ -18,11 +6,14 @@ import scrollToDetailBox from "./scrolling.js"; window.addEventListener("DOMContentLoaded", () => { const apiKey = "k_pgd93xda"; //second apikey // const apiKey = "k_28x30ddn"; - //const apiKey = "k_n2nfzz4l"; + // const apiKey = "k_n2nfzz4l"; const insideDetailBox = document.getElementById("clicked-movie-id"); const inputSearchMovie = document.getElementById("search-movie"); + const searchResultsMoviesContainer = document.getElementById("movies"); const searchResultsMovies = document.getElementById("results-movies"); const genresList = document.getElementById("genres-list"); + const suggestedResultsListContainer = + document.getElementById("suggested-movies"); const suggestedResultsList = document.getElementById("suggested-results"); const urlAPI = `https://imdb-api.com/en/API/SearchMovie/${apiKey}`; const urlDetailsAPI = `https://imdb-api.com/en/API/Title/${apiKey}`; @@ -64,16 +55,28 @@ window.addEventListener("DOMContentLoaded", () => { target.innerHTML = ""; } + //show loader + function showLoader(target) { + const loader = target.getElementsByClassName("loader-container"); + loader[0].classList.add("visible"); + } + // hide loader + function hideLoader(target) { + const loader = target.getElementsByClassName("loader-container"); + loader[0].classList.remove("visible"); + } + // search results async function getMovies(movie) { + showLoader(searchResultsMoviesContainer); const movieValue = inputSearchMovie.value; const results = await fetch(`${urlAPI}/${movieValue}`) .then((response) => response.json()) .then((data) => data.results) .then((results) => { - // add pagintion + hideLoader(searchResultsMoviesContainer); document.getElementById("pagination-results").style.display = "block"; - // clearHtml(searchResultsMovies); + // add pagintion loadPaging(results.length, (pagingOptions) => { clearHtml(searchResultsMovies); const newArray = pageArraySplit(results, pagingOptions); @@ -88,36 +91,38 @@ window.addEventListener("DOMContentLoaded", () => { for (const movie of movies) { const movieElement = document.createElement("div"); movieElement.classList.add("selected-movie"); - // movieElement.innerHTML = `${movie.title}`; + movieElement.setAttribute("id", "click-movie"); movieElement.innerHTML = `${movie.title}`; - // movieElement.innerHTML = `${movie.title}`; movieElement.style.backgroundImage = `url(${movie.image})`; - // movieElement.classList.add("single-movie"); + movieElement.style.backgroundSize = "cover"; htmlTarget.appendChild(movieElement); + // movie title + const movieElementTitle = document.createElement("p"); + movieElementTitle.classList.add("results-movies-title"); + movieElementTitle.setAttribute("id", "click-movie"); + movieElementTitle.innerHTML = `${movie.title}`; + movieElement.appendChild(movieElementTitle); } } - // get id from selected movie link and create div with details in DOM + // get id from selected movie link and create div with details async function getDetails(movieId) { const details = await fetch(`${urlDetailsAPI}/${movieId}`) .then((response) => response.json()) .then((data) => { - // console.log(data); - // add to DOM div after clicked on link clearHtml(insideDetailBox); createMovieDetailsDom(data); - const genres = transformGenresToApiParam(data.genreList); // " " - showSuggestions(genres); - // scrollToDetailBox(); + if (data.genreList) { + const genres = transformGenresToApiParam(data.genreList); // " " + showSuggestions(genres); + } }); // .catch((error) => new Error("Details not found")); } - // create selected from API details of movie in DOM element + // create selected from API details function createMovieDetailsDom(data) { - // const insideDetailBox = document.getElementById("clicked-movie-id"); insideDetailBox.classList.add("detail-conatiner"); - // insideDetailBox.innerHTML = ""; //image if (data.image) { const detailBoxImage = document.createElement("div"); @@ -182,7 +187,7 @@ window.addEventListener("DOMContentLoaded", () => { detailBoxLanguages.classList.add("movie-languages"); detailBoxRight.appendChild(detailBoxLanguages); } - //stars - create ul + //stars if (data.starList) { createStars(data.starList, detailBoxRight); } @@ -209,7 +214,7 @@ window.addEventListener("DOMContentLoaded", () => { } } - // list with stars from movie - create list in DOM + // list with movie's stars function createStars(stars, box) { const detailBoxStars = document.createElement("ul"); detailBoxStars.classList.add("stars"); @@ -222,18 +227,16 @@ window.addEventListener("DOMContentLoaded", () => { } } - //add to DOM div after clicked on link form suggested movies - // suggestions - list of genres + //suggested movies async function showSuggestions(genres) { - // transformGenresToApiParam(genres); + showLoader(suggestedResultsListContainer); const suggestions = await fetch(`${advancedSearchUrl}/?genres=${genres}`) .then((response) => response.json()) .then((data) => data.results) .then((results) => { - // create element in DOM with genres which was selected to suggestions + hideLoader(suggestedResultsListContainer); document.getElementById("pagination-suggestions").style.display = "block"; - // createMoviesDOM(data, suggestedResultsList); loadPagingSuggestions(results.length, (pagingOptions) => { clearHtml(suggestedResultsList); const newArray = pageArraySplit(results, pagingOptions); @@ -248,7 +251,7 @@ window.addEventListener("DOMContentLoaded", () => { const forSuggestionsGenres = genres.map((genre) => { return genre.value; }); - return forSuggestionsGenres.join().toLowerCase(); // "genre1,genre2,genre3" + return forSuggestionsGenres.join().toLowerCase(); } // create div with genres in DOM @@ -256,17 +259,13 @@ window.addEventListener("DOMContentLoaded", () => { const genresElement = document.getElementById("genres-list"); genresElement.classList.add("genres-suggestions"); genresElement.innerHTML = ""; - // genresElement.classList.add("genres"); - // genresElement.innerHTML = `

        Suggestes movies from Genres:

        `; for (const genre of genres) { const genreElement = document.createElement("li"); genreElement.classList.add("single-genre"); genreElement.innerHTML = `${genre.value}`; genresElement.appendChild(genreElement); } - // genresList.appendChild(genresElement); } - // pagination for search results function pageArraySplit(array, pagingOptions) { const currentPageNumber = pagingOptions.currentPageNumber; @@ -276,4 +275,5 @@ window.addEventListener("DOMContentLoaded", () => { return array.slice(startingIndex, endingIndex); } + // }); diff --git a/style.css b/style.css index 1fd9e23a..f087a067 100644 --- a/style.css +++ b/style.css @@ -4,7 +4,6 @@ body { color: white; text-align: center; margin: 0 auto; - /* vertical-align: middle; */ height: 100vh; width: 100vw; } @@ -26,7 +25,6 @@ h1 { background-image: linear-gradient(0deg, rgba(255, 0, 150, 0.15), rgba(255, 0, 150, 0.15)), url(/cinema.jpg); background-size: cover; } -/* input */ label { font-size: 1.5em; color: black; @@ -47,10 +45,7 @@ input { input:focus { outline: none; } -/* end input */ -.results-movies { - margin-bottom: 50px; -} +/* results */ .results-movies, .results-genres { display: flex; @@ -59,26 +54,32 @@ input:focus { align-content: center; flex-direction: row; flex-wrap: wrap; + margin-bottom: 100px; } .selected-movie { + max-width: 250px; margin: 10px auto; border-radius: 10px; display: flex; align-items: center; justify-content: center; align-content: center; - flex-direction: row; + flex-direction: column; background-size: contain; background-repeat: no-repeat; background-position: center; } +.selected-movie > a { + font-size: 0px; +} .selected-movie a { - width: 150px; - height: 200px; + width: 250px; + height: 350px; border-radius: 10px; - /* height: 100%; - width: 100%; */ - font-size: 0px; +} +p.results-movies-title { + position: relative; + bottom: -50px; } .detail-conatiner { max-width: 1100px; @@ -111,6 +112,13 @@ input:focus { font-size: 2em; font-weight: bold; } +.plot, +.year, +.genres, +.movie-languages, +.stars { + font-size: 1.2em; +} .rating { font-size: 2em; font-weight: 900; From 2c43d1fb806cca1fbea25bc894896f0270ca358a Mon Sep 17 00:00:00 2001 From: elachcdv Date: Sun, 22 May 2022 18:14:18 +0200 Subject: [PATCH 11/22] styling, change loader and pagination settings, add classes in html --- index.html | 27 ++- loader.css | 109 +++++----- main.js | 13 +- pagination-suggestions.js | 4 +- style.css | 417 +++++++++++++++++++++++--------------- 5 files changed, 322 insertions(+), 248 deletions(-) diff --git a/index.html b/index.html index 33da91a7..d51b3474 100644 --- a/index.html +++ b/index.html @@ -18,8 +18,8 @@

        Find.
        - Movie.
        - Watch. + Your.
        + Movie.

        @@ -27,7 +27,7 @@

        type="text" id="search-movie" name="searchTxt" - placeholder="Write movie title" + placeholder="movie title" />
        @@ -37,18 +37,17 @@

        -
        - +
        -
          @@ -58,13 +57,13 @@

          -
          - + diff --git a/loader.css b/loader.css index 385ccf3d..19add600 100644 --- a/loader.css +++ b/loader.css @@ -1,5 +1,6 @@ .loader-container { display: none; + padding-top: 100px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.1); @@ -8,65 +9,57 @@ min-height: 300px; display: flex; justify-content: center; + height: 100%; + width: 100%; + position: absolute; + background: #000000a8; + z-index: 9999; } .loader { position: absolute; - color: #fff; - font-size: 10px; - width: 1em; - height: 1em; - border-radius: 50%; - position: relative; - text-indent: -9999em; - animation: mulShdSpin 1.3s infinite linear; - transform: translateZ(0); + color: #fff; + font-size: 10px; + width: 1em; + height: 1em; + border-radius: 50%; + position: relative; + text-indent: -9999em; + animation: mulShdSpin 1.3s infinite linear; + transform: translateZ(0); +} + +@keyframes mulShdSpin { + 0%, + 100% { + box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, + 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0; + } + 12.5% { + box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, + 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; + } + 25% { + box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, + 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; } - - @keyframes mulShdSpin { - 0%, - 100% { - box-shadow: 0 -3em 0 0.2em, - 2em -2em 0 0em, 3em 0 0 -1em, - 2em 2em 0 -1em, 0 3em 0 -1em, - -2em 2em 0 -1em, -3em 0 0 -1em, - -2em -2em 0 0; - } - 12.5% { - box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, - 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, - -2em 2em 0 -1em, -3em 0 0 -1em, - -2em -2em 0 -1em; - } - 25% { - box-shadow: 0 -3em 0 -0.5em, - 2em -2em 0 0, 3em 0 0 0.2em, - 2em 2em 0 0, 0 3em 0 -1em, - -2em 2em 0 -1em, -3em 0 0 -1em, - -2em -2em 0 -1em; - } - 37.5% { - box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, - 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, - -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em; - } - 50% { - box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, - 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, - -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em; - } - 62.5% { - box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, - 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, - -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em; - } - 75% { - box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, - 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, - -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0; - } - 87.5% { - box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, - 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, - -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em; - } - } \ No newline at end of file + 37.5% { + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, + 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em; + } + 50% { + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, + 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em; + } + 62.5% { + box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, + 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em; + } + 75% { + box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, + 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0; + } + 87.5% { + box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, + 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em; + } +} diff --git a/main.js b/main.js index fa233ba0..dfa82877 100644 --- a/main.js +++ b/main.js @@ -4,9 +4,9 @@ import loadPagingSuggestions from "./pagination-suggestions.js"; import scrollToDetailBox from "./scrolling.js"; window.addEventListener("DOMContentLoaded", () => { - const apiKey = "k_pgd93xda"; //second apikey - // const apiKey = "k_28x30ddn"; - // const apiKey = "k_n2nfzz4l"; + // const apiKey = "k_pgd93xda"; // first api key + const apiKey = "k_28x30ddn"; + // const apiKey = "k_n2nfzz4l"; // second api key const insideDetailBox = document.getElementById("clicked-movie-id"); const inputSearchMovie = document.getElementById("search-movie"); const searchResultsMoviesContainer = document.getElementById("movies"); @@ -75,7 +75,7 @@ window.addEventListener("DOMContentLoaded", () => { .then((data) => data.results) .then((results) => { hideLoader(searchResultsMoviesContainer); - document.getElementById("pagination-results").style.display = "block"; + document.getElementById("pagination-results").style.display = "flex"; // add pagintion loadPaging(results.length, (pagingOptions) => { clearHtml(searchResultsMovies); @@ -236,7 +236,7 @@ window.addEventListener("DOMContentLoaded", () => { .then((results) => { hideLoader(suggestedResultsListContainer); document.getElementById("pagination-suggestions").style.display = - "block"; + "flex"; loadPagingSuggestions(results.length, (pagingOptions) => { clearHtml(suggestedResultsList); const newArray = pageArraySplit(results, pagingOptions); @@ -259,6 +259,9 @@ window.addEventListener("DOMContentLoaded", () => { const genresElement = document.getElementById("genres-list"); genresElement.classList.add("genres-suggestions"); genresElement.innerHTML = ""; + const suggestionsHeader = document.createElement("h2"); + suggestionsHeader.innerHTML = `Other suggested movies`; + genresElement.appendChild(suggestionsHeader); for (const genre of genres) { const genreElement = document.createElement("li"); genreElement.classList.add("single-genre"); diff --git a/pagination-suggestions.js b/pagination-suggestions.js index 25cb5bfa..6bb9be3c 100644 --- a/pagination-suggestions.js +++ b/pagination-suggestions.js @@ -1,6 +1,6 @@ "use strict"; -const prevBtn = document.getElementById("prev-btn"); -const nextBtn = document.getElementById("next-btn"); +const prevBtn = document.getElementById("prev-bt"); +const nextBtn = document.getElementById("next-bt"); const curPage = document.getElementById("cur-page"); const totPages = document.getElementById("tot-pages"); const PER_PAGE = 5; diff --git a/style.css b/style.css index f087a067..a25f49bb 100644 --- a/style.css +++ b/style.css @@ -1,223 +1,302 @@ body { - background-color: rgb(0, 0, 0); - font-family: 'Montserrat', sans-serif; - color: white; - text-align: center; - margin: 0 auto; - height: 100vh; - width: 100vw; + background-color: rgb(0, 0, 0); + font-family: "Montserrat", sans-serif; + color: white; + text-align: center; + margin: 0 auto; } a { - cursor: pointer; - /* height: 100%; - width: 100%; */ + cursor: pointer; } h1 { - font-size: 120px; - font-weight: 700; - background-clip: text; - -webkit-background-clip: text; - color: transparent; - line-height: 1; - text-transform: uppercase; - font-family: 'Inter', sans-serif; - font-weight: 900; - background-image: linear-gradient(0deg, rgba(255, 0, 150, 0.15), rgba(255, 0, 150, 0.15)), url(/cinema.jpg); - background-size: cover; -} -label { - font-size: 1.5em; - color: black; - display: block; + font-size: 120px; + font-weight: 700; + background-clip: text; + -webkit-background-clip: text; + color: transparent; + line-height: 1; + text-transform: uppercase; + font-family: "Inter", sans-serif; + font-weight: 900; + background-image: linear-gradient( + 0deg, + rgba(255, 0, 150, 0.15), + rgba(255, 0, 150, 0.15) + ), + url(/cinema.jpg); + background-size: cover; +} +.bold { + font-weight: bold; +} +/* input */ +label { + font-size: 1.5em; + color: black; + display: block; } input { - font-size: 1.2em; - margin: 0 auto 100px auto; - padding: 20px 50px; - background: black; - text-align: center; - color: rgb(212, 212, 212); - display: block; - border: 1px solid #170f32; - box-shadow: 1px 3px 55px 3px #3e268d; - border-radius: 10px; + font-size: 1.2em; + margin: 0 auto 100px auto; + padding: 20px 50px; + background: black; + text-align: center; + color: rgb(212, 212, 212); + display: block; + border: 1px solid #170f32; + box-shadow: 1px 3px 55px 3px #3e268d; + border-radius: 10px; } input:focus { - outline: none; + outline: none; } /* results */ .results-movies, .results-genres { - display: flex; - align-items: center; - justify-content: space-evenly; - align-content: center; - flex-direction: row; - flex-wrap: wrap; - margin-bottom: 100px; + display: flex; + align-items: center; + justify-content: space-evenly; + align-content: center; + flex-direction: row; + flex-wrap: wrap; + margin-bottom: 100px; } .selected-movie { - max-width: 250px; - margin: 10px auto; - border-radius: 10px; - display: flex; - align-items: center; - justify-content: center; - align-content: center; - flex-direction: column; - background-size: contain; - background-repeat: no-repeat; - background-position: center; + max-width: 250px; + margin: 40px auto; + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + align-content: center; + flex-direction: column; + background-size: contain; + background-repeat: no-repeat; + background-position: center; } .selected-movie > a { - font-size: 0px; + font-size: 0px; } .selected-movie a { - width: 250px; - height: 350px; - border-radius: 10px; + width: 250px; + height: 350px; + border-radius: 10px; } p.results-movies-title { - position: relative; - bottom: -50px; + font-size: 18px; + position: relative; + bottom: -50px; + font-weight: bold; + background-color: rgb(0 0 0 / 81%); } .detail-conatiner { - max-width: 1100px; - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-column-gap: 30px; - grid-row-gap: 30px; - text-align: justify; - margin: 100px auto; - justify-items: center; - align-items: center; + max-width: 1100px; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-column-gap: 30px; + grid-row-gap: 30px; + text-align: justify; + margin: 100px auto; + justify-items: center; + align-items: center; } .movie-image img { - border-radius: 15px; - max-height: 600px; - width: 100%;; + border-radius: 15px; + max-height: 600px; + width: 100%; } .box-left, .box-right { - height: auto; - float: left; + height: auto; + float: left; } .box-right { - padding: 50px; - max-width: 600px; + padding: 50px; + max-width: 600px; } /* DETAILS MOVIE */ /* rating */ .title { - font-size: 2em; - font-weight: bold; + font-size: 2em; + font-weight: bold; } -.plot, -.year, -.genres, -.movie-languages, +.plot, +.year, +.genres, +.movie-languages, .stars { - font-size: 1.2em; + font-size: 1.2em; } .rating { - font-size: 2em; - font-weight: 900; - margin: 0; + font-size: 2em; + font-weight: 900; + margin: 0; } .rating::before { - content: "\2605"; - color: goldenrod; - margin-right: 10px; + content: "\2605"; + color: goldenrod; + margin-right: 10px; } .rating-title { - font-size: 1em; - font-weight: bold; - margin: 20px 0 0 0; + font-size: 1em; + font-weight: bold; + margin: 20px 0 0 0; } /* awards */ .movie-awards { - font-size: 1.1em; - /* margin: 0; */ - font-weight: bold; + font-size: 1.1em; + /* margin: 0; */ + font-weight: bold; } /* suggestions */ .genres-suggestions { - list-style: none; - display: flex; - justify-content: space-evenly; - align-items: center; - flex-direction: row; - margin: 50px auto; + list-style: none; + display: flex; + justify-content: center; + align-items: center; + flex-direction: row; + margin: 50px auto 10px auto; + flex-wrap: wrap; +} +ul.genres-suggestions { + padding-left: inherit; } .single-genre { - background: black; - color: white; - padding: 10px 50px; - border-radius: 9px; + color: white; + padding: 20px 30px; + border-radius: 9px; + font-size: 15px; + font-weight: bold; +} +.genres-suggestions h2 { + font-size: 26px; + font-weight: bold; + width: 100%; } - /* pagination */ -.next-btn, +.next-btn, .prev-btn { - width: 20px; - height: 20px; - background-color: black; - color: white; -} -.next-btn, -.prev-btn, -div#current-page, -div#total-pages, -div#tot-pages, -div#cur-page { - display: inline-block; -} -/* buttons for paginations */ + display: flex; + width: 20px; + height: 20px; + background-color: black; + color: white; + align-items: center; + justify-content: center; +} +.next-btn span, +.prev-btn span { + display: flex; + align-items: stretch; + justify-content: center; +} +.pagination { + align-items: center; + justify-content: space-between; + width: 300px; + margin: 0 auto; +} button { - --glow-color: rgb(217, 176, 255); - --glow-spread-color: rgba(191, 123, 255, 0.781); - --enhanced-glow-color: rgb(231, 206, 255); - --btn-color: rgb(100, 61, 136); - border: .25em solid var(--glow-color); - padding: 1em 3em; - color: var(--glow-color); - font-size: 15px; - font-weight: bold; - background-color: var(--btn-color); - border-radius: 1em; - outline: none; - box-shadow: 0 0 1em .25em var(--glow-color), - 0 0 4em 1em var(--glow-spread-color), - inset 0 0 .75em .25em var(--glow-color); - text-shadow: 0 0 .5em var(--glow-color); - position: relative; - transition: all 0.3s; - } - - button::after { - pointer-events: none; - content: ""; - position: absolute; - top: 120%; - left: 0; - height: 100%; - width: 100%; - background-color: var(--glow-spread-color); - filter: blur(2em); - opacity: .7; - transform: perspective(1.5em) rotateX(35deg) scale(1, .6); - } - - button:hover { - color: var(--btn-color); - background-color: var(--glow-color); - box-shadow: 0 0 1em .25em var(--glow-color), - 0 0 4em 2em var(--glow-spread-color), - inset 0 0 .75em .25em var(--glow-color); - } - - button:active { - box-shadow: 0 0 0.6em .25em var(--glow-color), - 0 0 2.5em 2em var(--glow-spread-color), - inset 0 0 .5em .25em var(--glow-color); - } \ No newline at end of file + font-size: 20px; + --glow-color: rgb(38, 30, 140); + --btn-color: rgb(80, 71, 195); + border: 0.25em solid var(--glow-color); + padding: 1em 2.2em; + color: var(--glow-color); + font-weight: bold; + background-color: var(--btn-color); + border-radius: 1em; + outline: none; + text-shadow: 0 0 0.25em var(--glow-color); + position: relative; + transition: all 0.3s; +} +button::after { + pointer-events: none; + content: ""; + position: absolute; + top: 120%; + left: 0; + height: 100%; + width: 100%; + background-color: var(--glow-spread-color); + filter: blur(2em); + opacity: 0.7; + transform: perspective(1.5em) rotateX(35deg) scale(1, 0.6); +} +button:hover { + color: white; + background-color: rgb(16 12 56); +} +button:active { + box-shadow: 0 0 0.6em 0.25em var(--glow-color), + 0 0 2.5em 2em var(--glow-spread-color), + inset 0 0 0.5em 0.25em var(--glow-color); +} +/* media queries */ +@media only screen and (max-width: 1024px) { + p.results-movies-title { + font-size: 16px; + } +} +@media only screen and (min-width: 480px) and (max-width: 1024px) { + .selected-movie { + max-width: 150px; + } + .selected-movie a { + width: 150px; + height: 200px; + } +} +@media only screen and (max-width: 480px) { + h1 { + font-size: 70px; + } + .single-genre { + padding: 10px; + } + .genres-suggestions h2 { + font-size: 20px; + } + input { + padding: 10px; + margin: 0 auto 30px auto; + } + .detail-conatiner { + border-radius: 20px; + padding-top: 30px; + border: 1px solid white; + max-width: 100%; + display: flex; + text-align: justify; + margin: 50px 10px 10px 10px; + justify-items: center; + align-items: center; + flex-direction: column; + justify-content: center; + align-content: center; + } + .box-left, + .box-right { + height: auto; + float: none; + } + .movie-image img { + max-height: 400px; + width: auto; + } + .plot, + .year, + .genres, + .movie-languages, + .stars { + font-size: 1em; + } + .box-right { + padding: 10px 30px 0px 30px; + } + .results-movies, + .results-genres { + margin-bottom: 50px; + } +} From 23a3a7be7ddbebf01383c809ec141e9e8b4ede62 Mon Sep 17 00:00:00 2001 From: elachcdv Date: Mon, 23 May 2022 14:20:29 +0200 Subject: [PATCH 12/22] responsive pagination --- pagination-suggestions.js | 4 +++- pagination.js | 4 +++- style.css | 3 +++ 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/pagination-suggestions.js b/pagination-suggestions.js index 6bb9be3c..72ab974f 100644 --- a/pagination-suggestions.js +++ b/pagination-suggestions.js @@ -3,7 +3,9 @@ const prevBtn = document.getElementById("prev-bt"); const nextBtn = document.getElementById("next-bt"); const curPage = document.getElementById("cur-page"); const totPages = document.getElementById("tot-pages"); -const PER_PAGE = 5; + +let width = document.body.clientWidth; +let PER_PAGE = width > 767 ? 5 : 1; export default function loadPagingSuggestions(totalItems, callback) { let currentPageNumber = 1; diff --git a/pagination.js b/pagination.js index 175f26bb..147f1275 100644 --- a/pagination.js +++ b/pagination.js @@ -3,7 +3,9 @@ const previousButton = document.getElementById("previous"); const nextButton = document.getElementById("next"); const currentPage = document.getElementById("current-page"); const totalPages = document.getElementById("total-pages"); -const PER_PAGE = 5; + +let width = document.body.clientWidth; +let PER_PAGE = width > 767 ? 5 : 1; export default function loadPaging(totalItems, callback) { let currentPageNumber = 1; diff --git a/style.css b/style.css index a25f49bb..94f1939f 100644 --- a/style.css +++ b/style.css @@ -252,6 +252,9 @@ button:active { h1 { font-size: 70px; } + .selected-movie a { + height: 300px; + } .single-genre { padding: 10px; } From b6aff4c98419e38396fc3faa5d88ddd94df15051 Mon Sep 17 00:00:00 2001 From: elachcdv Date: Mon, 23 May 2022 16:44:48 +0200 Subject: [PATCH 13/22] error handling --- main.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/main.js b/main.js index dfa82877..c13e4b8f 100644 --- a/main.js +++ b/main.js @@ -116,8 +116,8 @@ window.addEventListener("DOMContentLoaded", () => { const genres = transformGenresToApiParam(data.genreList); // " " showSuggestions(genres); } - }); - // .catch((error) => new Error("Details not found")); + }) + .catch((error) => new Error("Details not found")); } // create selected from API details @@ -242,8 +242,8 @@ window.addEventListener("DOMContentLoaded", () => { const newArray = pageArraySplit(results, pagingOptions); createMoviesDOM(newArray, suggestedResultsList); }); - // .catch((error) => new Error("Details not found")); - }); + }) + .catch((error) => new Error("Suggestions not found")); } // transform genres to api param @@ -278,5 +278,4 @@ window.addEventListener("DOMContentLoaded", () => { return array.slice(startingIndex, endingIndex); } - // }); From 96909d6c10fa23832c909e82cf5986128b5e3f4e Mon Sep 17 00:00:00 2001 From: elachcdv Date: Mon, 23 May 2022 17:02:04 +0200 Subject: [PATCH 14/22] description edit --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index d51b3474..36f1a125 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - + From 063b18dbe92b9f8e6594a0b79e8179349bb4ab82 Mon Sep 17 00:00:00 2001 From: elachcdv <95166511+elachcdv@users.noreply.github.com> Date: Tue, 24 May 2022 10:15:43 +0200 Subject: [PATCH 15/22] Create README.md --- README.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 00000000..73ef0e4c --- /dev/null +++ b/README.md @@ -0,0 +1,13 @@ +# JavaScript Project - App +Find Your Movie App + +# API source +https://imdb-api.com/api#SearchMovie-header + +# How to use + +Enter the title of the film you want to find in the search field. +Wait a few seconds. +Then click on the film you like to view more information about it. +In addition to the first search suggestions, you will get other suggested movies based on the category of the movie you selected. +You can navigate through your search results and suggestions using the pagination buttons. From ac8f6aba523d4e57773aba89363ff0f673421809 Mon Sep 17 00:00:00 2001 From: elachcdv Date: Tue, 24 May 2022 15:04:02 +0200 Subject: [PATCH 16/22] fix sources urls --- index.html | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 36f1a125..fe24599b 100644 --- a/index.html +++ b/index.html @@ -10,8 +10,8 @@ href="https://fonts.googleapis.com/css2?family=Inter:wght@900&display=swap" rel="stylesheet" /> - - + + movie app @@ -66,8 +66,9 @@

          - - - + + + + From 92078e2658c683f304017c263c53a29094c1d172 Mon Sep 17 00:00:00 2001 From: elachcdv Date: Tue, 24 May 2022 15:16:18 +0200 Subject: [PATCH 17/22] fixing sources --- .gitignore | 2 ++ index.html | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..1e267ed8 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +# Ignore vscode files +.vscode \ No newline at end of file diff --git a/index.html b/index.html index fe24599b..c303c37c 100644 --- a/index.html +++ b/index.html @@ -68,7 +68,7 @@

          - + From fb1f4ccdf780f509b2460831e75252ff0d6c1afc Mon Sep 17 00:00:00 2001 From: elachcdv Date: Tue, 24 May 2022 15:20:45 +0200 Subject: [PATCH 18/22] fix background img source --- style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style.css b/style.css index 94f1939f..55177ffe 100644 --- a/style.css +++ b/style.css @@ -23,7 +23,7 @@ h1 { rgba(255, 0, 150, 0.15), rgba(255, 0, 150, 0.15) ), - url(/cinema.jpg); + url(cinema.jpg); background-size: cover; } .bold { From 09d0765832c125cb34e3ba80864c8bba93ae7132 Mon Sep 17 00:00:00 2001 From: elachcdv Date: Wed, 25 May 2022 09:06:39 +0200 Subject: [PATCH 19/22] switch api key, img style on mobile --- main.js | 4 ++-- style.css | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/main.js b/main.js index c13e4b8f..db39e1c8 100644 --- a/main.js +++ b/main.js @@ -4,8 +4,8 @@ import loadPagingSuggestions from "./pagination-suggestions.js"; import scrollToDetailBox from "./scrolling.js"; window.addEventListener("DOMContentLoaded", () => { - // const apiKey = "k_pgd93xda"; // first api key - const apiKey = "k_28x30ddn"; + const apiKey = "k_pgd93xda"; // first api key + // const apiKey = "k_28x30ddn"; // third api key // const apiKey = "k_n2nfzz4l"; // second api key const insideDetailBox = document.getElementById("clicked-movie-id"); const inputSearchMovie = document.getElementById("search-movie"); diff --git a/style.css b/style.css index 55177ffe..2f3a3311 100644 --- a/style.css +++ b/style.css @@ -285,8 +285,8 @@ button:active { float: none; } .movie-image img { - max-height: 400px; - width: auto; + max-height: 380px; + max-width: 100%; } .plot, .year, From 4b098ef556b9fa502acb4c2d4bfefeebbdca1456 Mon Sep 17 00:00:00 2001 From: elachcdv Date: Sun, 29 May 2022 11:19:24 +0200 Subject: [PATCH 20/22] clean folder structure --- cinema.jpg => assets/cinema.jpg | Bin index.html | 10 +++++----- main.js => scripts/main.js | 0 .../pagination-suggestions.js | 0 pagination.js => scripts/pagination.js | 0 scrolling.js => scripts/scrolling.js | 0 loader.css => styles/loader.css | 0 style.css => styles/style.css | 2 +- 8 files changed, 6 insertions(+), 6 deletions(-) rename cinema.jpg => assets/cinema.jpg (100%) rename main.js => scripts/main.js (100%) rename pagination-suggestions.js => scripts/pagination-suggestions.js (100%) rename pagination.js => scripts/pagination.js (100%) rename scrolling.js => scripts/scrolling.js (100%) rename loader.css => styles/loader.css (100%) rename style.css => styles/style.css (99%) diff --git a/cinema.jpg b/assets/cinema.jpg similarity index 100% rename from cinema.jpg rename to assets/cinema.jpg diff --git a/index.html b/index.html index c303c37c..3744d113 100644 --- a/index.html +++ b/index.html @@ -10,8 +10,8 @@ href="https://fonts.googleapis.com/css2?family=Inter:wght@900&display=swap" rel="stylesheet" /> - - + + movie app @@ -66,9 +66,9 @@

          - - + + - + diff --git a/main.js b/scripts/main.js similarity index 100% rename from main.js rename to scripts/main.js diff --git a/pagination-suggestions.js b/scripts/pagination-suggestions.js similarity index 100% rename from pagination-suggestions.js rename to scripts/pagination-suggestions.js diff --git a/pagination.js b/scripts/pagination.js similarity index 100% rename from pagination.js rename to scripts/pagination.js diff --git a/scrolling.js b/scripts/scrolling.js similarity index 100% rename from scrolling.js rename to scripts/scrolling.js diff --git a/loader.css b/styles/loader.css similarity index 100% rename from loader.css rename to styles/loader.css diff --git a/style.css b/styles/style.css similarity index 99% rename from style.css rename to styles/style.css index 2f3a3311..b882f89f 100644 --- a/style.css +++ b/styles/style.css @@ -23,7 +23,7 @@ h1 { rgba(255, 0, 150, 0.15), rgba(255, 0, 150, 0.15) ), - url(cinema.jpg); + url(/assets/cinema.jpg); background-size: cover; } .bold { From b9a9d64f62c40a9f425212f5aadc2ec2cb00a85d Mon Sep 17 00:00:00 2001 From: elachcdv Date: Mon, 27 Jun 2022 22:43:28 +0200 Subject: [PATCH 21/22] sources url modify --- index.html | 10 +++++----- styles/style.css | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 3744d113..b48fdc86 100644 --- a/index.html +++ b/index.html @@ -10,8 +10,8 @@ href="https://fonts.googleapis.com/css2?family=Inter:wght@900&display=swap" rel="stylesheet" /> - - + + movie app @@ -66,9 +66,9 @@

          - - + + - + diff --git a/styles/style.css b/styles/style.css index b882f89f..7e21dc3b 100644 --- a/styles/style.css +++ b/styles/style.css @@ -23,7 +23,7 @@ h1 { rgba(255, 0, 150, 0.15), rgba(255, 0, 150, 0.15) ), - url(/assets/cinema.jpg); + url(assets/cinema.jpg); background-size: cover; } .bold { From 3fc98dd1bcbc7431915a556a845c9e653e7288e9 Mon Sep 17 00:00:00 2001 From: elachcdv Date: Mon, 27 Jun 2022 22:49:01 +0200 Subject: [PATCH 22/22] src image change --- styles/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/style.css b/styles/style.css index 7e21dc3b..0a5c3b46 100644 --- a/styles/style.css +++ b/styles/style.css @@ -23,7 +23,7 @@ h1 { rgba(255, 0, 150, 0.15), rgba(255, 0, 150, 0.15) ), - url(assets/cinema.jpg); + url(https://elachcdv.github.io/javascript-project-2022/assets/cinema.jpg); background-size: cover; } .bold {