From 24fcb878b913383271d3c97de4b96533a094eb5b Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Fri, 21 Sep 2018 10:40:15 +0100 Subject: [PATCH 01/17] beggining of app --- index.html | 19 +++++++++++++++++++ js/app.js | 0 2 files changed, 19 insertions(+) create mode 100644 index.html create mode 100644 js/app.js diff --git a/index.html b/index.html new file mode 100644 index 00000000..6a4390ac --- /dev/null +++ b/index.html @@ -0,0 +1,19 @@ + + + + + + + Project Cinema + + + +
+ +
+ + + + + \ No newline at end of file diff --git a/js/app.js b/js/app.js new file mode 100644 index 00000000..e69de29b From 242c6431a6530408af0e01b3314798fd4ebe647c Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Fri, 21 Sep 2018 10:58:00 +0100 Subject: [PATCH 02/17] beginning of app --- index.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/index.html b/index.html index 6a4390ac..3c3eba29 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,9 @@
+
+ +
From b84d7652a6ed5fbeaed904e4ab7c9298c34ca670 Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Fri, 21 Sep 2018 11:56:03 +0100 Subject: [PATCH 03/17] search button displaying input.value in

element --- index.html | 12 ++++++++++-- js/app.js | 12 ++++++++++++ 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 3c3eba29..7d1e4ecd 100644 --- a/index.html +++ b/index.html @@ -10,9 +10,17 @@

-
-
+
+ +
+ +
+ +
diff --git a/js/app.js b/js/app.js index e69de29b..3c5fd78e 100644 --- a/js/app.js +++ b/js/app.js @@ -0,0 +1,12 @@ +const form = document.querySelector('#search'), + searchInput = form.querySelector('.search__input'), + searchButton = form.querySelector('.search__btn'), + results = document.querySelector('.results'); + +form.addEventListener('submit', (e) => { + e.preventDefault(); + + results.innerHTML = ` +

${searchInput.value}

+ ` +}); From 13a31c86422ecfde0c8385e5ad383478f5871c6a Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Fri, 21 Sep 2018 14:20:06 +0100 Subject: [PATCH 04/17] Title, year and poster is displayed after typed in search box --- js/app.js | 33 +++++++++++++++++++++++++++++---- 1 file changed, 29 insertions(+), 4 deletions(-) diff --git a/js/app.js b/js/app.js index 3c5fd78e..52e37869 100644 --- a/js/app.js +++ b/js/app.js @@ -3,10 +3,35 @@ const form = document.querySelector('#search'), searchButton = form.querySelector('.search__btn'), results = document.querySelector('.results'); +let titleMovies = '', + inputValue = ''; + form.addEventListener('submit', (e) => { e.preventDefault(); - - results.innerHTML = ` -

${searchInput.value}

- ` + inputValue = searchInput.value; + runFetch(inputValue); }); + +function runFetch(inputValue) { + fetch(`http://www.omdbapi.com/?apikey=f899a3c1&s=${inputValue}`) + .then((response) => { + return response.json(); + }) + .then((body) => { + body.Search.forEach(e => { + let searchResult = document.createElement('div'); + searchResult.className = 'results__searchResult'; + searchResult.innerHTML = ` +

${e.Title}

+

${e.Year}

+ + `; + results.append(searchResult); + }); + + }) + .catch((error) => { + console.log('Server failed to return data: ' + error); + }); +} + From c1b90ccfd6b0ebabc437fcb853c65fbb9531cfc8 Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Sat, 22 Sep 2018 22:26:45 +0100 Subject: [PATCH 05/17] search bar and 2 layouts for screen sizes --- index.html | 16 ++++++----- js/app.js | 79 ++++++++++++++++++++++++++++++++++++++++++++---------- 2 files changed, 75 insertions(+), 20 deletions(-) diff --git a/index.html b/index.html index 7d1e4ecd..2af1f573 100644 --- a/index.html +++ b/index.html @@ -5,21 +5,25 @@ - Project Cinema + + Project Cinema by Mariusz Sygnowski
-
-
-
+
+ +
+
+
diff --git a/js/app.js b/js/app.js index 52e37869..5b33bfd2 100644 --- a/js/app.js +++ b/js/app.js @@ -1,32 +1,83 @@ -const form = document.querySelector('#search'), - searchInput = form.querySelector('.search__input'), - searchButton = form.querySelector('.search__btn'), - results = document.querySelector('.results'); +const form = document.querySelector('#control__search'), + searchInput = document.querySelector('.control__search__input'), + results = document.querySelector('.results'), + buttonsClass = document.querySelector('.buttons'), + nextBtn = document.querySelector('.buttons__button-next'), + prevBtn = document.querySelector('.buttons__button-prev'); -let titleMovies = '', - inputValue = ''; +let inputValue = '', + pageNumber = 1, + totalPages = 0, + imdbID = '', + fetchUrl = ''; form.addEventListener('submit', (e) => { e.preventDefault(); + buttonsClass.style.display = 'grid'; + results.innerHTML = ''; + pageNumber = 1; + totalPages = 0; inputValue = searchInput.value; - runFetch(inputValue); + runFetch(inputValue, pageNumber); }); -function runFetch(inputValue) { - fetch(`http://www.omdbapi.com/?apikey=f899a3c1&s=${inputValue}`) +nextBtn.addEventListener('click', (e) => { + e.preventDefault(); + results.innerHTML = ''; + if (pageNumber >= totalPages) { + } else { + pageNumber++; + runFetch(inputValue, pageNumber); + } + +}); +prevBtn.addEventListener('click', (e) => { + e.preventDefault(); + results.innerHTML = ''; + if (pageNumber === 1) { + } else { + pageNumber--; + runFetch(inputValue, pageNumber); + } +}); + + +function runFetch(inputValue, pageNumber) { + fetchUrl = `http://www.omdbapi.com/?apikey=f899a3c1&s=${inputValue}&page=${pageNumber}&i=tt1504019&plot=full`; + fetch(fetchUrl) .then((response) => { return response.json(); }) .then((body) => { + // console.log(body); + totalPages = body.totalResults / 10; //divide by as as there is 10 results per page + totalPages = Math.floor(totalPages); //round down as we don't want to have anything after dot + console.log(totalPages); + body.Search.forEach(e => { - let searchResult = document.createElement('div'); - searchResult.className = 'results__searchResult'; - searchResult.innerHTML = ` + imdbID = e.imdbID; + fetch(`http://www.omdbapi.com/?i=${imdbID}&plot=full&apikey=f899a3c1`) + .then((response) => { + return response.json(); + }) + .then((body) => { + console.log(body); + let searchResult = document.createElement('div'); + searchResult.className = 'results__searchResult'; + + let currentPoster = e.Poster; + if (currentPoster === 'N/A') { + currentPoster = 'images/noPoster.jpg'; + } + searchResult.innerHTML = `

${e.Title}

${e.Year}

- + `; - results.append(searchResult); + + results.append(searchResult); + }) + }); }) From b45e92e1279caaca9cea14dc980c953e6d17090c Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Sat, 22 Sep 2018 22:31:23 +0100 Subject: [PATCH 06/17] correction in last commit: added all files --- .DS_Store | Bin 0 -> 6148 bytes images/noPoster.jpg | Bin 0 -> 7129 bytes style.css | 202 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 202 insertions(+) create mode 100644 .DS_Store create mode 100644 images/noPoster.jpg create mode 100644 style.css diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..8e452fbc9c8629ad594aeb926831c96c4974d499 GIT binary patch literal 6148 zcmeHKPfO!K6rZV86AO}sJt%k>@ZhC~N_Be;UG*d=rr3kK+a@H~Kujb_+e0Y?KY$-V zum1TSx*uY{h3gZ1J7zFWAdg$gsdWONRB#9tE*{*jQ z2E&f^^?MTMZWsrttfy-HXos<%44X+m_A?o;i%a|1&3jPC*tENa)T&~q{%t%q4P$-l;N(~T>iXvP?*8HN=~>MJhaXnT7mXA64aO8911F86 zBt8fKBxe#!NDL4I#K4>~pqDeFGNt<8 literal 0 HcmV?d00001 diff --git a/images/noPoster.jpg b/images/noPoster.jpg new file mode 100644 index 0000000000000000000000000000000000000000..f4be87212822a5f1a5a72087bf2ccd6451073083 GIT binary patch literal 7129 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 literal 0 HcmV?d00001 diff --git a/style.css b/style.css new file mode 100644 index 00000000..28973a3e --- /dev/null +++ b/style.css @@ -0,0 +1,202 @@ +*, +*:before, +*:after { + box-sizing: inherit; +} + +html { + box-sizing: border-box; +} + +body { + font-family: 'FF Meta VF', Helvetica, Arial, sans-serif; + background-color: #232f3e; + padding: 0; + margin: 0; +} + +.container { + display: grid; + grid-auto-rows: min-content 10fr; + width: 100vw; + margin: 0 auto; + padding: 0 0.7rem; +} + +.control { + font-family: 'Open Sans', sans-serif; +} + +/* search box*/ + +#control__search { + background: #e1e1e1; /* Fallback color for non-css3 browsers */ + width: calc(100% - 0); + margin: 1.5rem 0; + /*padding: 0 1rem;*/ + display: grid; + grid-template-columns: 1fr min-content; + + /* Gradients */ + background: -webkit-gradient( linear,left top, left bottom, color-stop(0, rgb(243,243,243)), color-stop(1, rgb(225,225,225))); + background: -moz-linear-gradient( center top, rgb(243,243,243) 0%, rgb(225,225,225) 100%); + + /* Rounded Corners */ + border-radius: 17px; + -webkit-border-radius: 17px; + -moz-border-radius: 17px; + + /* Shadows */ + box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3); + -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3); + -moz-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3); +} + +/*** TEXT BOX ***/ +.control__search__input{ + background: #fafafa; /* Fallback color for non-css3 browsers */ + + /* Gradients */ + background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(250,250,250)), color-stop(1, rgb(230,230,230))); + background: -moz-linear-gradient( center top, rgb(250,250,250) 0%, rgb(230,230,230) 100%); + border: 0; + border-bottom: 1px solid #fff; + border-right: 1px solid rgba(255,255,255,.8); + font-size: 1rem; + margin: 0.2rem; + padding-left: 1rem; + + /* Rounded Corners */ + border-radius: 17px; + -webkit-border-radius: 17px; + -moz-border-radius: 17px; + + /* Shadows */ + box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2); + -webkit-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2); + -moz-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2); +} + +/*** USER IS FOCUSED ON TEXT BOX ***/ +.control__search__input:focus{ + outline: none; + background: #fff; /* Fallback color for non-css3 browsers */ + + /* Gradients */ + background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255,255,255)), color-stop(1, rgb(235,235,235))); + background: -moz-linear-gradient( center top, rgb(255,255,255) 0%, rgb(235,235,235) 100%); +} + +/*** SEARCH BUTTON ***/ +.control__search__submit{ + background: #44921f;/* Fallback color for non-css3 browsers */ + /* Gradients */ + background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(79,188,32)), color-stop(0.15, rgb(73,157,34)), color-stop(0.88, rgb(62,135,28)), color-stop(1, rgb(49,114,21))); + background: -moz-linear-gradient( center top, rgb(79,188,32) 0%, rgb(73,157,34) 15%, rgb(62,135,28) 88%, rgb(49,114,21) 100%); + border: 0; + color: #eee; + cursor: pointer; + float: right; + font: 16px 'Raleway', sans-serif; + font-weight: bold; + height: 30px; + margin: 4px; + text-shadow: 0 -1px 0 rgba(0,0,0,.3); + outline: none; + + /* Rounded Corners */ + border-radius: 30px; + -webkit-border-radius: 30px; + -moz-border-radius: 30px; + + /* Shadows */ + box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4); + -moz-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.2); + -webkit-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4); +} +/*** SEARCH BUTTON HOVER ***/ +.control__search__submit:hover { + background: #4ea923; /* Fallback color for non-css3 browsers */ + + /* Gradients */ + background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22))); + background: -moz-linear-gradient( center top, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%); +} +.control__search__submit:active { + background: #4ea923; /* Fallback color for non-css3 browsers */ + + /* Gradients */ + background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22))); + background: -moz-linear-gradient( center bottom, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%); +} + +.buttons { + display: none; + color: whitesmoke; +} + +.buttons__button-next { + position: fixed; + right: calc(50% - 1.9rem); + bottom: calc(0% + 0.2rem); + font-size: 1.3rem; + border-top: 1px solid rgba(255, 255, 255, 0.25); + color: black; + opacity: 0.6; + text-align: center; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35); + border-radius: 50%; + white-space: nowrap; + display: inline-block; + cursor: pointer; +} + +.buttons__button-prev { + position: fixed; + top: calc(0% + 0.2rem); + right: calc(50% - 1.9rem); + font-size: 1.3rem; + border-top: 1px solid rgba(255, 255, 255, 0.25); + color: black; + opacity: 0.6; + text-align: center; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35); + border-radius: 50%; + white-space: nowrap; + display: inline-block; + cursor: pointer; +} + +.results { + display: grid; + grid-template-rows: auto auto auto; + justify-content: stretch; +} + +.results__searchResult:nth-child(odd) { + background-color: #3d516b; +} + +.results__searchResult:nth-child(even) { + background-color: #4a6282; +} + +.results__searchResult__poster { + width: 100%; + display: grid; + align-items: flex-end; +} + +@media (min-width: 500px) { + .results { + grid-template-columns: 1fr 1fr; + grid-gap: 1rem; + } +} + +@media (min-width: 768px) { + .results { + grid-template-columns: 1fr 1fr 1fr; + grid-gap: 1rem; + } +} \ No newline at end of file From 9487a6b1ee5e0f9c00ceecc8f8f384bc52721f6e Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Sat, 22 Sep 2018 23:09:04 +0100 Subject: [PATCH 07/17] https insted of http: website via github will works now correctly --- js/app.js | 6 ++++-- style.css | 23 ++++++++++++++++------- 2 files changed, 20 insertions(+), 9 deletions(-) diff --git a/js/app.js b/js/app.js index 5b33bfd2..3883ab9e 100644 --- a/js/app.js +++ b/js/app.js @@ -24,6 +24,7 @@ form.addEventListener('submit', (e) => { nextBtn.addEventListener('click', (e) => { e.preventDefault(); results.innerHTML = ''; + nextBtn.style.border = 'none'; if (pageNumber >= totalPages) { } else { pageNumber++; @@ -43,7 +44,7 @@ prevBtn.addEventListener('click', (e) => { function runFetch(inputValue, pageNumber) { - fetchUrl = `http://www.omdbapi.com/?apikey=f899a3c1&s=${inputValue}&page=${pageNumber}&i=tt1504019&plot=full`; + fetchUrl = `https://www.omdbapi.com/?apikey=f899a3c1&s=${inputValue}&page=${pageNumber}&i=tt1504019&plot=full`; fetch(fetchUrl) .then((response) => { return response.json(); @@ -56,7 +57,7 @@ function runFetch(inputValue, pageNumber) { body.Search.forEach(e => { imdbID = e.imdbID; - fetch(`http://www.omdbapi.com/?i=${imdbID}&plot=full&apikey=f899a3c1`) + fetch(`https://www.omdbapi.com/?i=${imdbID}&plot=full&apikey=f899a3c1`) .then((response) => { return response.json(); }) @@ -72,6 +73,7 @@ function runFetch(inputValue, pageNumber) { searchResult.innerHTML = `

${e.Title}

${e.Year}

+

`; diff --git a/style.css b/style.css index 28973a3e..4f89beb7 100644 --- a/style.css +++ b/style.css @@ -132,7 +132,7 @@ body { .buttons { display: none; - color: whitesmoke; + color: white; } .buttons__button-next { @@ -140,7 +140,7 @@ body { right: calc(50% - 1.9rem); bottom: calc(0% + 0.2rem); font-size: 1.3rem; - border-top: 1px solid rgba(255, 255, 255, 0.25); + border: none; color: black; opacity: 0.6; text-align: center; @@ -156,7 +156,6 @@ body { top: calc(0% + 0.2rem); right: calc(50% - 1.9rem); font-size: 1.3rem; - border-top: 1px solid rgba(255, 255, 255, 0.25); color: black; opacity: 0.6; text-align: center; @@ -169,8 +168,11 @@ body { .results { display: grid; - grid-template-rows: auto auto auto; - justify-content: stretch; +} + +.results__searchResult { + display: grid; + grid-template-rows: auto auto 1fr min-content; } .results__searchResult:nth-child(odd) { @@ -183,10 +185,10 @@ body { .results__searchResult__poster { width: 100%; - display: grid; - align-items: flex-end; + align-self: flex-end; } + @media (min-width: 500px) { .results { grid-template-columns: 1fr 1fr; @@ -195,6 +197,13 @@ body { } @media (min-width: 768px) { + .results { + grid-template-columns: 1fr 1fr; + grid-gap: 1rem; + } +} + +@media (min-width: 1024px) { .results { grid-template-columns: 1fr 1fr 1fr; grid-gap: 1rem; From e4048b2ca04e8ead8868e2d40679c2ba0892333c Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Sat, 22 Sep 2018 23:37:34 +0100 Subject: [PATCH 08/17] adjustment in grid gap --- style.css | 23 +++++++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/style.css b/style.css index 4f89beb7..313fcb0a 100644 --- a/style.css +++ b/style.css @@ -137,7 +137,7 @@ body { .buttons__button-next { position: fixed; - right: calc(50% - 1.9rem); + right: calc(50% - 1.7rem); bottom: calc(0% + 0.2rem); font-size: 1.3rem; border: none; @@ -154,7 +154,7 @@ body { .buttons__button-prev { position: fixed; top: calc(0% + 0.2rem); - right: calc(50% - 1.9rem); + right: calc(50% - 1.7rem); font-size: 1.3rem; color: black; opacity: 0.6; @@ -168,11 +168,28 @@ body { .results { display: grid; + grid-gap: 1rem; } .results__searchResult { display: grid; grid-template-rows: auto auto 1fr min-content; + grid-gap: 0.5rem; +} + +.results__searchResult p:first-child { + margin-top: 0.5rem; +} + +.results__searchResult p{ + padding-left: 0.5rem; + margin: 0; + grid-gap: 0.5rem; +} + +.results__searchResult p:nth-child(3) { + margin: 0; + padding: 0; } .results__searchResult:nth-child(odd) { @@ -192,14 +209,12 @@ body { @media (min-width: 500px) { .results { grid-template-columns: 1fr 1fr; - grid-gap: 1rem; } } @media (min-width: 768px) { .results { grid-template-columns: 1fr 1fr; - grid-gap: 1rem; } } From e81911f48ba7227d02436d6860e9018942e67cda Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Sun, 23 Sep 2018 11:38:33 +0100 Subject: [PATCH 09/17] rebild app.js: moved paramaters to object params, added function setUrl --- js/app.js | 60 ++++++++++++++++++++++++++++--------------------------- style.css | 16 ++++++++++----- 2 files changed, 42 insertions(+), 34 deletions(-) diff --git a/js/app.js b/js/app.js index 3883ab9e..3c05275c 100644 --- a/js/app.js +++ b/js/app.js @@ -5,59 +5,62 @@ const form = document.querySelector('#control__search'), nextBtn = document.querySelector('.buttons__button-next'), prevBtn = document.querySelector('.buttons__button-prev'); -let inputValue = '', - pageNumber = 1, - totalPages = 0, - imdbID = '', - fetchUrl = ''; +let params = { + inputValue: '', + pageNumber: 1, + totalPages: 0, + imdbID: '', + apiKey: 'f899a3c1', + fetchUrl: '' +}; form.addEventListener('submit', (e) => { e.preventDefault(); buttonsClass.style.display = 'grid'; results.innerHTML = ''; - pageNumber = 1; - totalPages = 0; - inputValue = searchInput.value; - runFetch(inputValue, pageNumber); + params.pageNumber = 1; + params.totalPages = 0; + params.inputValue = searchInput.value; + runFetch(params.inputValue, params.pageNumber); }); nextBtn.addEventListener('click', (e) => { e.preventDefault(); results.innerHTML = ''; - nextBtn.style.border = 'none'; - if (pageNumber >= totalPages) { - } else { - pageNumber++; - runFetch(inputValue, pageNumber); - } + // if (params.pageNumber >= params.totalPages) { + // } else { + // params.pageNumber++; + runFetch(); + // } }); prevBtn.addEventListener('click', (e) => { e.preventDefault(); results.innerHTML = ''; - if (pageNumber === 1) { - } else { - pageNumber--; - runFetch(inputValue, pageNumber); - } + // if (params.pageNumber === 1) { + // } else { + // params.pageNumber--; + runFetch(); + // } }); +function setUrl() { + return params.fetchUrl = `https://www.omdbapi.com/?apikey=${params.apiKey}&s=${params.inputValue}&page=${params.pageNumber}&i=tt1504019&plot=full&i=${params.imdbID}`; +} -function runFetch(inputValue, pageNumber) { - fetchUrl = `https://www.omdbapi.com/?apikey=f899a3c1&s=${inputValue}&page=${pageNumber}&i=tt1504019&plot=full`; - fetch(fetchUrl) +function runFetch() { + fetch(setUrl()) .then((response) => { return response.json(); }) .then((body) => { // console.log(body); - totalPages = body.totalResults / 10; //divide by as as there is 10 results per page - totalPages = Math.floor(totalPages); //round down as we don't want to have anything after dot - console.log(totalPages); + // params.totalPages = body.totalResults / 10; //divide by as as there is 10 results per page + // params.totalPages = Math.floor(params.totalPages); //round down as we don't want to have anything after dot body.Search.forEach(e => { - imdbID = e.imdbID; - fetch(`https://www.omdbapi.com/?i=${imdbID}&plot=full&apikey=f899a3c1`) + params.imdbID = e.imdbID; + fetch(setUrl()) .then((response) => { return response.json(); }) @@ -76,7 +79,6 @@ function runFetch(inputValue, pageNumber) {

`; - results.append(searchResult); }) diff --git a/style.css b/style.css index 313fcb0a..d72dfc68 100644 --- a/style.css +++ b/style.css @@ -31,9 +31,8 @@ body { #control__search { background: #e1e1e1; /* Fallback color for non-css3 browsers */ - width: calc(100% - 0); - margin: 1.5rem 0; - /*padding: 0 1rem;*/ + width: 100%; + margin: 3rem 0 1.5rem 0; display: grid; grid-template-columns: 1fr min-content; @@ -149,6 +148,7 @@ body { white-space: nowrap; display: inline-block; cursor: pointer; + outline: none; } .buttons__button-prev { @@ -164,6 +164,7 @@ body { white-space: nowrap; display: inline-block; cursor: pointer; + outline: none; } .results { @@ -173,7 +174,7 @@ body { .results__searchResult { display: grid; - grid-template-rows: auto auto 1fr min-content; + grid-template-rows: auto auto 1fr auto; grid-gap: 0.5rem; } @@ -221,6 +222,11 @@ body { @media (min-width: 1024px) { .results { grid-template-columns: 1fr 1fr 1fr; - grid-gap: 1rem; + } +} + +@media (min-width: 1248px) { + .results { + grid-template-columns: 1fr 1fr 1fr 1fr; } } \ No newline at end of file From 38aee1d7762ab92602b6f734313d977fabbfd618 Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Sun, 23 Sep 2018 12:59:34 +0100 Subject: [PATCH 10/17] images are on beggining of every found movie, description is also added if found --- js/app.js | 45 ++++++++++++++++++++++++++++++++------------- style.css | 4 ++-- 2 files changed, 34 insertions(+), 15 deletions(-) diff --git a/js/app.js b/js/app.js index 3c05275c..266e9f59 100644 --- a/js/app.js +++ b/js/app.js @@ -18,7 +18,7 @@ form.addEventListener('submit', (e) => { e.preventDefault(); buttonsClass.style.display = 'grid'; results.innerHTML = ''; - params.pageNumber = 1; + params.pageNumber = 2; params.totalPages = 0; params.inputValue = searchInput.value; runFetch(params.inputValue, params.pageNumber); @@ -31,6 +31,7 @@ nextBtn.addEventListener('click', (e) => { // } else { // params.pageNumber++; runFetch(); + // console.log(params.pageNumber); // } }); @@ -45,7 +46,7 @@ prevBtn.addEventListener('click', (e) => { }); function setUrl() { - return params.fetchUrl = `https://www.omdbapi.com/?apikey=${params.apiKey}&s=${params.inputValue}&page=${params.pageNumber}&i=tt1504019&plot=full&i=${params.imdbID}`; + return params.fetchUrl = `https://www.omdbapi.com/?i=${params.imdbID}&plot=full&apikey=${params.apiKey}&s=${params.inputValue}&page=${params.pageNumber}`; } function runFetch() { @@ -54,31 +55,49 @@ function runFetch() { return response.json(); }) .then((body) => { - // console.log(body); - // params.totalPages = body.totalResults / 10; //divide by as as there is 10 results per page - // params.totalPages = Math.floor(params.totalPages); //round down as we don't want to have anything after dot + console.log(body); + params.totalPages = body.totalResults / 10; //divide by as as there is 10 results per page + params.totalPages = Math.round(params.totalPages); //round up as I want to have all possible number of pages + console.log(body.totalResults); + console.log(params.totalPages); body.Search.forEach(e => { params.imdbID = e.imdbID; + params.inputValue = ''; // as I have imdbID(id of movie) and we want to get full details of our searched movie I need to delete typed input and search only with imdbID fetch(setUrl()) .then((response) => { return response.json(); }) .then((body) => { console.log(body); + let movieParams = { + description: body.Plot, + poster: body.Poster, + title: body.Title, + year: body.Year + }; + let searchResult = document.createElement('div'); searchResult.className = 'results__searchResult'; - let currentPoster = e.Poster; - if (currentPoster === 'N/A') { - currentPoster = 'images/noPoster.jpg'; + if (movieParams.poster === 'N/A') { //if there is no poster then I use default image + movieParams.poster = 'images/noPoster.jpg'; + } + if (movieParams.description === 'N/A') { //if there is no description I set + movieParams.description = ''; + } + if (movieParams.description.length > 290) { //if our description is longer than 290 characters I delete rest description and in that place insert 3 dots + movieParams.description = `${movieParams.description.slice(0, 290)}...`; } + searchResult.innerHTML = ` -

${e.Title}

-

${e.Year}

-

- - `; + +

${movieParams.title}

+

${movieParams.year}

+

${movieParams.description}

+

+ `; + results.append(searchResult); }) diff --git a/style.css b/style.css index d72dfc68..34c28135 100644 --- a/style.css +++ b/style.css @@ -174,7 +174,7 @@ body { .results__searchResult { display: grid; - grid-template-rows: auto auto 1fr auto; + grid-template-rows: auto auto auto auto 1fr; grid-gap: 0.5rem; } @@ -188,7 +188,7 @@ body { grid-gap: 0.5rem; } -.results__searchResult p:nth-child(3) { +.emptyBox { margin: 0; padding: 0; } From dec0feabf66d445ad8955a0b10a83ab3382c4ad6 Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Sun, 23 Sep 2018 13:51:30 +0100 Subject: [PATCH 11/17] prev and next button are working now --- js/app.js | 48 +++++++++++++++++++++++++----------------------- style.css | 2 +- 2 files changed, 26 insertions(+), 24 deletions(-) diff --git a/js/app.js b/js/app.js index 266e9f59..25332f61 100644 --- a/js/app.js +++ b/js/app.js @@ -6,65 +6,67 @@ const form = document.querySelector('#control__search'), prevBtn = document.querySelector('.buttons__button-prev'); let params = { - inputValue: '', + inputValue: searchInput.value, pageNumber: 1, totalPages: 0, imdbID: '', - apiKey: 'f899a3c1', - fetchUrl: '' + apiKey: 'f899a3c1' }; form.addEventListener('submit', (e) => { e.preventDefault(); buttonsClass.style.display = 'grid'; results.innerHTML = ''; - params.pageNumber = 2; + params.pageNumber = 1; params.totalPages = 0; params.inputValue = searchInput.value; - runFetch(params.inputValue, params.pageNumber); + runFetch(); }); nextBtn.addEventListener('click', (e) => { e.preventDefault(); results.innerHTML = ''; - // if (params.pageNumber >= params.totalPages) { - // } else { - // params.pageNumber++; - runFetch(); - // console.log(params.pageNumber); - // } + if (params.pageNumber === params.totalPages) { + params.pageNumber = 1; + } else { + params.pageNumber++; + } + runFetch(); }); prevBtn.addEventListener('click', (e) => { e.preventDefault(); results.innerHTML = ''; - // if (params.pageNumber === 1) { - // } else { - // params.pageNumber--; + if (params.pageNumber === 1) { + params.pageNumber = params.totalPages; + } else { + params.pageNumber--; + } runFetch(); - // } + }); -function setUrl() { - return params.fetchUrl = `https://www.omdbapi.com/?i=${params.imdbID}&plot=full&apikey=${params.apiKey}&s=${params.inputValue}&page=${params.pageNumber}`; +function setUrlWithTypedSearch() { + return `https://www.omdbapi.com/?&plot=full&apikey=${params.apiKey}&s=${params.inputValue}&page=${params.pageNumber}`; +} + +function setUrlForEachMovieWithImdbIDNumber() { + return `https://www.omdbapi.com/?i=${params.imdbID}&plot=full&apikey=${params.apiKey}&page=${params.pageNumber}`; } function runFetch() { - fetch(setUrl()) + fetch(setUrlWithTypedSearch()) .then((response) => { return response.json(); }) .then((body) => { console.log(body); params.totalPages = body.totalResults / 10; //divide by as as there is 10 results per page - params.totalPages = Math.round(params.totalPages); //round up as I want to have all possible number of pages - console.log(body.totalResults); - console.log(params.totalPages); + params.totalPages = Math.ceil(params.totalPages); //round up as I want to have all possible number of pages body.Search.forEach(e => { params.imdbID = e.imdbID; - params.inputValue = ''; // as I have imdbID(id of movie) and we want to get full details of our searched movie I need to delete typed input and search only with imdbID - fetch(setUrl()) + fetch(setUrlForEachMovieWithImdbIDNumber()) .then((response) => { return response.json(); }) diff --git a/style.css b/style.css index 34c28135..8fd9bcaf 100644 --- a/style.css +++ b/style.css @@ -183,7 +183,7 @@ body { } .results__searchResult p{ - padding-left: 0.5rem; + padding: 0 0.5rem; margin: 0; grid-gap: 0.5rem; } From 0ed38cb8d453da5219dcfc3824eb1148a150aa9b Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Sun, 23 Sep 2018 14:08:28 +0100 Subject: [PATCH 12/17] search box width will be set to 30rem when screen is over 500px --- js/app.js | 7 +++---- style.css | 13 ++++++++++++- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/js/app.js b/js/app.js index 25332f61..95325c94 100644 --- a/js/app.js +++ b/js/app.js @@ -50,7 +50,7 @@ function setUrlWithTypedSearch() { return `https://www.omdbapi.com/?&plot=full&apikey=${params.apiKey}&s=${params.inputValue}&page=${params.pageNumber}`; } -function setUrlForEachMovieWithImdbIDNumber() { +function setUrlForEachMovieWithImdbIDNumber() { //I need imdbID to get full details of every found movie return `https://www.omdbapi.com/?i=${params.imdbID}&plot=full&apikey=${params.apiKey}&page=${params.pageNumber}`; } @@ -60,7 +60,6 @@ function runFetch() { return response.json(); }) .then((body) => { - console.log(body); params.totalPages = body.totalResults / 10; //divide by as as there is 10 results per page params.totalPages = Math.ceil(params.totalPages); //round up as I want to have all possible number of pages @@ -97,9 +96,9 @@ function runFetch() {

${movieParams.title}

${movieParams.year}

${movieParams.description}

-

+

`; - + //using class emptyBox to push up all elements to the top box - without this emptyBox not all searchResult div will looks the same - sometimes I don't have description so it will be empty results.append(searchResult); }) diff --git a/style.css b/style.css index 8fd9bcaf..963aeee9 100644 --- a/style.css +++ b/style.css @@ -17,7 +17,7 @@ body { .container { display: grid; - grid-auto-rows: min-content 10fr; + grid-auto-rows: min-content 1fr; width: 100vw; margin: 0 auto; padding: 0 0.7rem; @@ -208,12 +208,23 @@ body { @media (min-width: 500px) { + .control { + display: grid; + justify-content: center; + } + + #control__search { + width: 30rem; + } + .results { grid-template-columns: 1fr 1fr; } } @media (min-width: 768px) { + + .results { grid-template-columns: 1fr 1fr; } From 1935bf4bade449b4fc07338c5907ae88a483efdc Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Sun, 23 Sep 2018 19:21:36 +0100 Subject: [PATCH 13/17] when clicked on selected movie, poster is gone and in that place I fill with details from that movie --- index.html | 2 ++ js/app.js | 38 +++++++++++++++++------- style.css | 86 ++++++++++++++++++++++++++++++++---------------------- 3 files changed, 81 insertions(+), 45 deletions(-) diff --git a/index.html b/index.html index 2af1f573..05996646 100644 --- a/index.html +++ b/index.html @@ -20,9 +20,11 @@
+

+

diff --git a/js/app.js b/js/app.js index 95325c94..38318a80 100644 --- a/js/app.js +++ b/js/app.js @@ -2,6 +2,7 @@ const form = document.querySelector('#control__search'), searchInput = document.querySelector('.control__search__input'), results = document.querySelector('.results'), buttonsClass = document.querySelector('.buttons'), + currentPageClasses = document.querySelectorAll('.currentPage'), nextBtn = document.querySelector('.buttons__button-next'), prevBtn = document.querySelector('.buttons__button-prev'); @@ -15,7 +16,7 @@ let params = { form.addEventListener('submit', (e) => { e.preventDefault(); - buttonsClass.style.display = 'grid'; + buttonsClass.style.display = 'none'; results.innerHTML = ''; params.pageNumber = 1; params.totalPages = 0; @@ -26,6 +27,7 @@ form.addEventListener('submit', (e) => { nextBtn.addEventListener('click', (e) => { e.preventDefault(); results.innerHTML = ''; + buttonsClass.style.display = 'none'; if (params.pageNumber === params.totalPages) { params.pageNumber = 1; } else { @@ -34,9 +36,11 @@ nextBtn.addEventListener('click', (e) => { runFetch(); }); + prevBtn.addEventListener('click', (e) => { e.preventDefault(); results.innerHTML = ''; + buttonsClass.style.display = 'none'; if (params.pageNumber === 1) { params.pageNumber = params.totalPages; } else { @@ -54,6 +58,10 @@ function setUrlForEachMovieWithImdbIDNumber() { //I need imdbID to get full deta return `https://www.omdbapi.com/?i=${params.imdbID}&plot=full&apikey=${params.apiKey}&page=${params.pageNumber}`; } +function fullDetails() { + +} + function runFetch() { fetch(setUrlWithTypedSearch()) .then((response) => { @@ -62,7 +70,9 @@ function runFetch() { .then((body) => { params.totalPages = body.totalResults / 10; //divide by as as there is 10 results per page params.totalPages = Math.ceil(params.totalPages); //round up as I want to have all possible number of pages - + currentPageClasses.forEach((currentPageClass) => { + currentPageClass.textContent = `page ${params.pageNumber} / ${params.totalPages}`; + }); body.Search.forEach(e => { params.imdbID = e.imdbID; fetch(setUrlForEachMovieWithImdbIDNumber()) @@ -71,11 +81,13 @@ function runFetch() { }) .then((body) => { console.log(body); + buttonsClass.style.display = 'block'; let movieParams = { description: body.Plot, poster: body.Poster, title: body.Title, - year: body.Year + year: body.Year, + actors: body.Actors }; let searchResult = document.createElement('div'); @@ -87,17 +99,23 @@ function runFetch() { if (movieParams.description === 'N/A') { //if there is no description I set movieParams.description = ''; } - if (movieParams.description.length > 290) { //if our description is longer than 290 characters I delete rest description and in that place insert 3 dots - movieParams.description = `${movieParams.description.slice(0, 290)}...`; - } searchResult.innerHTML = ` + ${movieParams.title} -

${movieParams.title}

-

${movieParams.year}

-

${movieParams.description}

-

+ ${movieParams.year} + ${movieParams.description} + ${movieParams.actors} `; + const posterImg = searchResult.querySelector('.results__searchResult__poster'); + const description = searchResult.querySelector('.results__searchResult__description'); + const year = searchResult.querySelector('.results__searchResult__year'); + searchResult.addEventListener('click', () => { + console.log(posterImg); + description.classList.toggle('hide'); + year.classList.toggle('hide'); + posterImg.classList.toggle('hide'); + }); //using class emptyBox to push up all elements to the top box - without this emptyBox not all searchResult div will looks the same - sometimes I don't have description so it will be empty results.append(searchResult); }) diff --git a/style.css b/style.css index 963aeee9..eeb3b76b 100644 --- a/style.css +++ b/style.css @@ -32,13 +32,13 @@ body { #control__search { background: #e1e1e1; /* Fallback color for non-css3 browsers */ width: 100%; - margin: 3rem 0 1.5rem 0; + margin: 3rem 0 0 0; display: grid; grid-template-columns: 1fr min-content; /* Gradients */ - background: -webkit-gradient( linear,left top, left bottom, color-stop(0, rgb(243,243,243)), color-stop(1, rgb(225,225,225))); - background: -moz-linear-gradient( center top, rgb(243,243,243) 0%, rgb(225,225,225) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(243, 243, 243)), color-stop(1, rgb(225, 225, 225))); + background: -moz-linear-gradient(center top, rgb(243, 243, 243) 0%, rgb(225, 225, 225) 100%); /* Rounded Corners */ border-radius: 17px; @@ -46,21 +46,21 @@ body { -moz-border-radius: 17px; /* Shadows */ - box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3); - -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3); - -moz-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3); + box-shadow: 1px 1px 2px rgba(0, 0, 0, .3), 0 0 2px rgba(0, 0, 0, .3); + -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .3), 0 0 2px rgba(0, 0, 0, .3); + -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, .3), 0 0 2px rgba(0, 0, 0, .3); } /*** TEXT BOX ***/ -.control__search__input{ +.control__search__input { background: #fafafa; /* Fallback color for non-css3 browsers */ /* Gradients */ - background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(250,250,250)), color-stop(1, rgb(230,230,230))); - background: -moz-linear-gradient( center top, rgb(250,250,250) 0%, rgb(230,230,230) 100%); + background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(250, 250, 250)), color-stop(1, rgb(230, 230, 230))); + background: -moz-linear-gradient(center top, rgb(250, 250, 250) 0%, rgb(230, 230, 230) 100%); border: 0; border-bottom: 1px solid #fff; - border-right: 1px solid rgba(255,255,255,.8); + border-right: 1px solid rgba(255, 255, 255, .8); font-size: 1rem; margin: 0.2rem; padding-left: 1rem; @@ -71,27 +71,27 @@ body { -moz-border-radius: 17px; /* Shadows */ - box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2); - -webkit-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2); - -moz-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2); + box-shadow: -1px -1px 2px rgba(0, 0, 0, .3), 0 0 1px rgba(0, 0, 0, .2); + -webkit-box-shadow: -1px -1px 2px rgba(0, 0, 0, .3), 0 0 1px rgba(0, 0, 0, .2); + -moz-box-shadow: -1px -1px 2px rgba(0, 0, 0, .3), 0 0 1px rgba(0, 0, 0, .2); } /*** USER IS FOCUSED ON TEXT BOX ***/ -.control__search__input:focus{ +.control__search__input:focus { outline: none; background: #fff; /* Fallback color for non-css3 browsers */ /* Gradients */ - background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255,255,255)), color-stop(1, rgb(235,235,235))); - background: -moz-linear-gradient( center top, rgb(255,255,255) 0%, rgb(235,235,235) 100%); + background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(255, 255, 255)), color-stop(1, rgb(235, 235, 235))); + background: -moz-linear-gradient(center top, rgb(255, 255, 255) 0%, rgb(235, 235, 235) 100%); } /*** SEARCH BUTTON ***/ -.control__search__submit{ - background: #44921f;/* Fallback color for non-css3 browsers */ +.control__search__submit { + background: #44921f; /* Fallback color for non-css3 browsers */ /* Gradients */ - background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(79,188,32)), color-stop(0.15, rgb(73,157,34)), color-stop(0.88, rgb(62,135,28)), color-stop(1, rgb(49,114,21))); - background: -moz-linear-gradient( center top, rgb(79,188,32) 0%, rgb(73,157,34) 15%, rgb(62,135,28) 88%, rgb(49,114,21) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(79, 188, 32)), color-stop(0.15, rgb(73, 157, 34)), color-stop(0.88, rgb(62, 135, 28)), color-stop(1, rgb(49, 114, 21))); + background: -moz-linear-gradient(center top, rgb(79, 188, 32) 0%, rgb(73, 157, 34) 15%, rgb(62, 135, 28) 88%, rgb(49, 114, 21) 100%); border: 0; color: #eee; cursor: pointer; @@ -100,7 +100,7 @@ body { font-weight: bold; height: 30px; margin: 4px; - text-shadow: 0 -1px 0 rgba(0,0,0,.3); + text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); outline: none; /* Rounded Corners */ @@ -109,29 +109,32 @@ body { -moz-border-radius: 30px; /* Shadows */ - box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4); - -moz-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.2); - -webkit-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4); + box-shadow: -1px -1px 1px rgba(255, 255, 255, .5), 1px 1px 0 rgba(0, 0, 0, .4); + -moz-box-shadow: -1px -1px 1px rgba(255, 255, 255, .5), 1px 1px 0 rgba(0, 0, 0, .2); + -webkit-box-shadow: -1px -1px 1px rgba(255, 255, 255, .5), 1px 1px 0 rgba(0, 0, 0, .4); } + /*** SEARCH BUTTON HOVER ***/ .control__search__submit:hover { background: #4ea923; /* Fallback color for non-css3 browsers */ /* Gradients */ - background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22))); - background: -moz-linear-gradient( center top, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(89, 222, 27)), color-stop(0.15, rgb(83, 179, 38)), color-stop(0.8, rgb(66, 143, 27)), color-stop(1, rgb(54, 120, 22))); + background: -moz-linear-gradient(center top, rgb(89, 222, 27) 0%, rgb(83, 179, 38) 15%, rgb(66, 143, 27) 80%, rgb(54, 120, 22) 100%); } + .control__search__submit:active { background: #4ea923; /* Fallback color for non-css3 browsers */ /* Gradients */ - background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22))); - background: -moz-linear-gradient( center bottom, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%); + background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(89, 222, 27)), color-stop(0.15, rgb(83, 179, 38)), color-stop(0.8, rgb(66, 143, 27)), color-stop(1, rgb(54, 120, 22))); + background: -moz-linear-gradient(center bottom, rgb(89, 222, 27) 0%, rgb(83, 179, 38) 15%, rgb(66, 143, 27) 80%, rgb(54, 120, 22) 100%); } .buttons { display: none; color: white; + text-align: center; } .buttons__button-next { @@ -167,6 +170,10 @@ body { outline: none; } +.currentPage:last-of-type { + margin-bottom: 2.4rem; +} + .results { display: grid; grid-gap: 1rem; @@ -174,15 +181,15 @@ body { .results__searchResult { display: grid; - grid-template-rows: auto auto auto auto 1fr; + grid-template-rows: repeat(4, min-content); grid-gap: 0.5rem; } -.results__searchResult p:first-child { +.results__searchResult span:first-child { margin-top: 0.5rem; } -.results__searchResult p{ +.results__searchResult span { padding: 0 0.5rem; margin: 0; grid-gap: 0.5rem; @@ -206,6 +213,10 @@ body { align-self: flex-end; } +.hide { + display: none; + height: 0; +} @media (min-width: 500px) { .control { @@ -224,20 +235,25 @@ body { @media (min-width: 768px) { - .results { - grid-template-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; } } @media (min-width: 1024px) { .results { - grid-template-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr 1fr; } } @media (min-width: 1248px) { .results { - grid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + } +} + +@media (min-width: 1800px) { + .results { + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } } \ No newline at end of file From 4bbebf7452f2ab6fbd0f8d97efe95cb4f1bb3d17 Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Sun, 23 Sep 2018 19:35:07 +0100 Subject: [PATCH 14/17] more details after clicked on selected movie --- js/app.js | 19 +++++++------------ style.css | 2 +- 2 files changed, 8 insertions(+), 13 deletions(-) diff --git a/js/app.js b/js/app.js index 38318a80..bee440ec 100644 --- a/js/app.js +++ b/js/app.js @@ -58,10 +58,6 @@ function setUrlForEachMovieWithImdbIDNumber() { //I need imdbID to get full deta return `https://www.omdbapi.com/?i=${params.imdbID}&plot=full&apikey=${params.apiKey}&page=${params.pageNumber}`; } -function fullDetails() { - -} - function runFetch() { fetch(setUrlWithTypedSearch()) .then((response) => { @@ -80,7 +76,7 @@ function runFetch() { return response.json(); }) .then((body) => { - console.log(body); + // console.log(body); buttonsClass.style.display = 'block'; let movieParams = { description: body.Plot, @@ -103,25 +99,24 @@ function runFetch() { searchResult.innerHTML = ` ${movieParams.title} - ${movieParams.year} - ${movieParams.description} - ${movieParams.actors} + Year: ${movieParams.year} + Description: ${movieParams.description} + Actors: ${movieParams.actors} `; const posterImg = searchResult.querySelector('.results__searchResult__poster'); const description = searchResult.querySelector('.results__searchResult__description'); const year = searchResult.querySelector('.results__searchResult__year'); + const actors = searchResult.querySelector('.results__searchResult__actors'); searchResult.addEventListener('click', () => { - console.log(posterImg); + // console.log(posterImg); description.classList.toggle('hide'); year.classList.toggle('hide'); posterImg.classList.toggle('hide'); + actors.classList.toggle('hide'); }); - //using class emptyBox to push up all elements to the top box - without this emptyBox not all searchResult div will looks the same - sometimes I don't have description so it will be empty results.append(searchResult); }) - }); - }) .catch((error) => { console.log('Server failed to return data: ' + error); diff --git a/style.css b/style.css index eeb3b76b..fdd60ecc 100644 --- a/style.css +++ b/style.css @@ -181,7 +181,7 @@ body { .results__searchResult { display: grid; - grid-template-rows: repeat(4, min-content); + grid-template-rows: repeat(5, min-content); grid-gap: 0.5rem; } From af12429d8de89961e375e155b2ff14b947546d2d Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Sun, 23 Sep 2018 20:31:14 +0100 Subject: [PATCH 15/17] adjustemnt in font weight --- js/app.js | 4 ++-- style.css | 9 +++++++++ 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/js/app.js b/js/app.js index bee440ec..7fd5954d 100644 --- a/js/app.js +++ b/js/app.js @@ -99,8 +99,8 @@ function runFetch() { searchResult.innerHTML = ` ${movieParams.title} - Year: ${movieParams.year} - Description: ${movieParams.description} + (${movieParams.year}) + ${movieParams.description} Actors: ${movieParams.actors} `; const posterImg = searchResult.querySelector('.results__searchResult__poster'); diff --git a/style.css b/style.css index fdd60ecc..ec943828 100644 --- a/style.css +++ b/style.css @@ -218,6 +218,15 @@ body { height: 0; } +.results__searchResult__title { + font-weight: 600; + font-size: 1.2rem; +} + +.results__searchResult__description:first-line{ + font-weight: bold; +} + @media (min-width: 500px) { .control { display: grid; From ec48044114e53e3e54dd2171cadaca9183065fac Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Sun, 23 Sep 2018 21:55:04 +0100 Subject: [PATCH 16/17] small changes in searchResult.innerHTML --- js/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/app.js b/js/app.js index 7fd5954d..9ccadca2 100644 --- a/js/app.js +++ b/js/app.js @@ -100,8 +100,8 @@ function runFetch() { ${movieParams.title} (${movieParams.year}) - ${movieParams.description} Actors: ${movieParams.actors} + ${movieParams.description} `; const posterImg = searchResult.querySelector('.results__searchResult__poster'); const description = searchResult.querySelector('.results__searchResult__description'); From 52834e3ecb72e94409135a0cd6ec2eec1df068e0 Mon Sep 17 00:00:00 2001 From: Mariusz Sygnowski Date: Thu, 27 Sep 2018 09:43:40 +0100 Subject: [PATCH 17/17] testing version: pageNumber:2 --- README.md | 4 ++-- js/app.js | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 49093dd2..4409a02d 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# Project Cinema +# Project Cinema by Mariusz Sygnowski -We want to create a movie search engine. To power it we will use the [Open Movie Database](http://www.omdbapi.com) API. +[Click here](https://mariuszsygnowski.github.io/project-cinema/) to see live version. To start using the OMDB API you will first need to sign up with them to receive and API key. The key issued to you will allow you 1000 requests per day and you will need to include this key as part of every request. diff --git a/js/app.js b/js/app.js index 9ccadca2..aa104fc0 100644 --- a/js/app.js +++ b/js/app.js @@ -8,7 +8,7 @@ const form = document.querySelector('#control__search'), let params = { inputValue: searchInput.value, - pageNumber: 1, + pageNumber: 2, totalPages: 0, imdbID: '', apiKey: 'f899a3c1' @@ -97,11 +97,11 @@ function runFetch() { } searchResult.innerHTML = ` - ${movieParams.title} +

${movieParams.title}

- (${movieParams.year}) - Actors: ${movieParams.actors} - ${movieParams.description} +

(${movieParams.year})

+

Actors: ${movieParams.actors}

+

${movieParams.description}

`; const posterImg = searchResult.querySelector('.results__searchResult__poster'); const description = searchResult.querySelector('.results__searchResult__description');