From 2fae5a9a894f75c7025266f13eb90d671cd1692f Mon Sep 17 00:00:00 2001 From: Ralph Date: Fri, 8 Jun 2018 10:00:55 +0100 Subject: [PATCH 01/20] Added index.html and main js file --- index.html | 14 ++++++++++++++ src/index.js | 2 ++ 2 files changed, 16 insertions(+) create mode 100644 index.html create mode 100644 src/index.js diff --git a/index.html b/index.html new file mode 100644 index 00000000..f662f946 --- /dev/null +++ b/index.html @@ -0,0 +1,14 @@ + + + + + + Project Cinema + + + + + + + + \ No newline at end of file diff --git a/src/index.js b/src/index.js new file mode 100644 index 00000000..50ee108f --- /dev/null +++ b/src/index.js @@ -0,0 +1,2 @@ +// code here +console.log("woop"); From fbf7c3ea0d62e07aeb5d19093e4971f747ba2544 Mon Sep 17 00:00:00 2001 From: Ralph Date: Fri, 8 Jun 2018 10:30:36 +0100 Subject: [PATCH 02/20] Added search form and search results placeholder --- index.html | 6 ++++++ src/index.js | 7 +++++-- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index f662f946..b6ca6314 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,13 @@ +
+ + +
+
+
diff --git a/src/index.js b/src/index.js index 50ee108f..f190f0f7 100644 --- a/src/index.js +++ b/src/index.js @@ -1,2 +1,5 @@ -// code here -console.log("woop"); +const form = document.querySelector("#movie-request__form"); + +form.addEventListener("submit", function(e) { + e.preventDefault(); +}); From bf501a5b3ba94752f8509275430546664028db42 Mon Sep 17 00:00:00 2001 From: Ralph Date: Fri, 8 Jun 2018 10:31:41 +0100 Subject: [PATCH 03/20] Added OMDB API --- src/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.js b/src/index.js index f190f0f7..4c074762 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,4 @@ +const omdbapiKey = aba7af8e; const form = document.querySelector("#movie-request__form"); form.addEventListener("submit", function(e) { From d34bb31411f92bd7bdb3d44e1a067371c77cfdd7 Mon Sep 17 00:00:00 2001 From: Ralph Date: Fri, 8 Jun 2018 10:51:15 +0100 Subject: [PATCH 04/20] Added fetch and console.log results --- src/index.js | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 4c074762..7e5155bb 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,26 @@ -const omdbapiKey = aba7af8e; +const omdbAPIKey = "aba7af8e"; const form = document.querySelector("#movie-request__form"); +const movieRequest = form.querySelector("#movie-request__input"); + +// Movie fetch +function movieFetch(movieRequest) { + fetch(`http://www.omdbapi.com/?s=${movieRequest}&apikey=${omdbAPIKey}`) + .then(response => { + console.warn(response); + return response.json(); + // debugger; + }) + .then(data => { + console.log(data); + // debugger; + }) + .catch(error => { + console.error(error); + // debugger; + }); +} form.addEventListener("submit", function(e) { e.preventDefault(); + movieFetch(movieRequest.value); }); From 792980ce4171f5d487d98930d9aed9210a900797 Mon Sep 17 00:00:00 2001 From: Ralph Date: Fri, 8 Jun 2018 11:08:11 +0100 Subject: [PATCH 05/20] Update file structure and added CSS --- index.html | 2 +- src/css/style.css | 0 src/{ => js}/index.js | 0 3 files changed, 1 insertion(+), 1 deletion(-) create mode 100644 src/css/style.css rename src/{ => js}/index.js (100%) diff --git a/index.html b/index.html index b6ca6314..40998108 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@
- + \ No newline at end of file diff --git a/src/css/style.css b/src/css/style.css new file mode 100644 index 00000000..e69de29b diff --git a/src/index.js b/src/js/index.js similarity index 100% rename from src/index.js rename to src/js/index.js From 8f5b4856d8197bb12ce812f99caaac00851befb8 Mon Sep 17 00:00:00 2001 From: Ralph Date: Fri, 8 Jun 2018 12:13:55 +0100 Subject: [PATCH 06/20] Added template literal for movies --- index.html | 5 +++-- src/js/index.js | 32 ++++++++++++++++++++++++++++---- 2 files changed, 31 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 40998108..3171eb39 100644 --- a/index.html +++ b/index.html @@ -7,11 +7,12 @@ +

OMDB Movie search

- +
-
+
diff --git a/src/js/index.js b/src/js/index.js index 7e5155bb..f74c4dd9 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -1,18 +1,42 @@ const omdbAPIKey = "aba7af8e"; const form = document.querySelector("#movie-request__form"); const movieRequest = form.querySelector("#movie-request__input"); +const resultsPlaceholder = document.querySelector("#search-results"); // Movie fetch function movieFetch(movieRequest) { fetch(`http://www.omdbapi.com/?s=${movieRequest}&apikey=${omdbAPIKey}`) .then(response => { - console.warn(response); + // console.warn(response); return response.json(); - // debugger; }) .then(data => { - console.log(data); - // debugger; + // Create array from data results + const movieData = [...data.Search]; + const movieMarkup = ` + ${movieData + .map( + movie => + // console.log(movie.Title); + ` +
+
+ +
+
+

${movie.Title}

+ ${movie.Year} + See on IMBD +
+
+ ` + ) + .join("")} + `; + resultsPlaceholder.innerHTML = movieMarkup; + // console.log(movieData); }) .catch(error => { console.error(error); From c90b10dd1669c6743c313b7e6a3097d5781a4b57 Mon Sep 17 00:00:00 2001 From: Ralph Date: Fri, 8 Jun 2018 13:33:37 +0100 Subject: [PATCH 07/20] Added movie list style --- src/css/style.css | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/src/css/style.css b/src/css/style.css index e69de29b..f6d59dc9 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -0,0 +1,24 @@ +.container { + width: 80%; + max-width: 1200px; + margin: 0 auto; +} + +/* Search form */ +.search-form { + margin-bottom: 60px; +} + +/* Movies list */ +.movie-wrapper { + display: grid; + grid-template-columns: 200px auto; + padding-bottom: 30px; + margin-bottom: 30px; + border-bottom: 1px solid #f1f1f1; +} + +.movie-poster img { + width: 100%; + max-width: 150px; +} From b403cefa160b378b95a6ff0e7d7430db8b464c75 Mon Sep 17 00:00:00 2001 From: Ralph Date: Fri, 8 Jun 2018 13:34:00 +0100 Subject: [PATCH 08/20] Added image placeholder for movies with no image --- index.html | 19 ++++++++++++------- src/js/index.js | 15 ++++++++++----- 2 files changed, 22 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index 3171eb39..5693309c 100644 --- a/index.html +++ b/index.html @@ -4,17 +4,22 @@ Project Cinema + -

OMDB Movie search

-
- - -
-
+
+

OMDB Movie search

+
+
+ + +
+
+
-
+
+ diff --git a/src/js/index.js b/src/js/index.js index f74c4dd9..4e26b3b8 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -12,23 +12,28 @@ function movieFetch(movieRequest) { }) .then(data => { // Create array from data results - const movieData = [...data.Search]; + const movieData = data.Search; + const movieMarkup = ` ${movieData .map( movie => - // console.log(movie.Title); `
- +

${movie.Title}

- ${movie.Year} +
Year: ${movie.Year}
See on IMBD + }">See on Internet Movie Database
` From 7e5728d30bec4fbc74ffcb27760182e8f39aadd2 Mon Sep 17 00:00:00 2001 From: Ralph Date: Fri, 8 Jun 2018 13:41:04 +0100 Subject: [PATCH 09/20] Added movie More Info button --- src/css/style.css | 6 ++++++ src/js/index.js | 5 +++-- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/css/style.css b/src/css/style.css index f6d59dc9..bd0b4f4f 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -18,6 +18,12 @@ border-bottom: 1px solid #f1f1f1; } +.movie-info__moreinfo { + display: block; + margin-top: 10px; + margin-bottom: 10px; +} + .movie-poster img { width: 100%; max-width: 150px; diff --git a/src/js/index.js b/src/js/index.js index 4e26b3b8..f12f025c 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -31,9 +31,10 @@ function movieFetch(movieRequest) {

${movie.Title}

Year: ${movie.Year}
- More Info + See on Internet Movie Database + }">See it on Internet Movie Database
` From 1779377448c8778023da255ec4cd4d0a3ef6b94c Mon Sep 17 00:00:00 2001 From: Ralph Date: Fri, 8 Jun 2018 15:53:19 +0100 Subject: [PATCH 10/20] Added movie More Info button functionality --- index.html | 2 +- src/css/style.css | 22 ++++++++++++++- src/js/index.js | 69 +++++++++++++++++++++++++++++++++++++++-------- 3 files changed, 80 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 5693309c..e62dd25a 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,7 @@

OMDB Movie search

- +
diff --git a/src/css/style.css b/src/css/style.css index bd0b4f4f..466947ec 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1,3 +1,9 @@ +/* font-family: 'Source Sans Pro', sans-serif; */ +@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro"); + +body { + font-family: "Source Sans Pro", sans-serif; +} .container { width: 80%; max-width: 1200px; @@ -10,7 +16,7 @@ } /* Movies list */ -.movie-wrapper { +.movie-list-wrapper { display: grid; grid-template-columns: 200px auto; padding-bottom: 30px; @@ -22,9 +28,23 @@ display: block; margin-top: 10px; margin-bottom: 10px; + width: 100px; + height: 40px; + border: none; + background-color: #f1f1f1; +} + +.movie-info__imdb-link { + display: block; } .movie-poster img { width: 100%; max-width: 150px; } + +/* Movie more info details */ +ul.movie-info__moreinfo-details { + list-style-type: none; + padding-left: 0; +} diff --git a/src/js/index.js b/src/js/index.js index f12f025c..6c71b7bc 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -4,14 +4,11 @@ const movieRequest = form.querySelector("#movie-request__input"); const resultsPlaceholder = document.querySelector("#search-results"); // Movie fetch -function movieFetch(movieRequest) { +function movieListFetch(movieRequest) { fetch(`http://www.omdbapi.com/?s=${movieRequest}&apikey=${omdbAPIKey}`) - .then(response => { - // console.warn(response); - return response.json(); - }) + .then(response => response.json()) .then(data => { - // Create array from data results + // data results array const movieData = data.Search; const movieMarkup = ` @@ -19,7 +16,7 @@ function movieFetch(movieRequest) { .map( movie => ` -
+

${movie.Title}

-
Year: ${movie.Year}
- +
Year: ${ + movie.Year + }
See it on Internet Movie Database + }">IMDB +
` @@ -50,7 +51,53 @@ function movieFetch(movieRequest) { }); } +// function movieFetch() { + +// } + +// Form event handler form.addEventListener("submit", function(e) { e.preventDefault(); - movieFetch(movieRequest.value); + movieListFetch(movieRequest.value); +}); + +// More info button event handler +resultsPlaceholder.addEventListener("click", function(e) { + if (e.target.id == "movie-info__moreinfo") { + const movieParentNode = e.target.parentNode; + const movieInfoWrapper = document.querySelector("movie-info"); + const title = e.target.attributes["data-title"].value; + fetch(`http://www.omdbapi.com/?t=${title}&apikey=${omdbAPIKey}`) + .then(response => { + // console.warn(response); + return response.json(); + }) + .then(data => { + // const movieMarkup = ` + //
+ //

${data.Plot}

+ //
+ // `; + // movieParentNode.append(movieMarkup); + // console.log(data.Plot); + + // More info elements to display + const infoToDisplay = ["Genre", "Plot", "Runtime", "Awards"]; + const html = Object.keys(data) + .map(function(key) { + if (infoToDisplay.indexOf(key) !== -1) { + return `
  • ${key}: ${data[key]}
    • `; + } + }) + .join(""); + const moreInfoList = document.createElement("ul"); + moreInfoList.setAttribute("class", "movie-info__moreinfo-details"); + moreInfoList.innerHTML = html; + movieParentNode.appendChild(moreInfoList); + }) + .catch(error => { + console.error(error); + // debugger; + }); + } }); From b05983aa6627d47b82ed249cfebed272f8f6aa5f Mon Sep 17 00:00:00 2001 From: Ralph Date: Sat, 9 Jun 2018 11:41:44 +0100 Subject: [PATCH 11/20] Added CSS variables and search input style --- index.html | 4 ++-- src/css/style.css | 35 ++++++++++++++++++++++++++++++++--- 2 files changed, 34 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index e62dd25a..e90f0a70 100644 --- a/index.html +++ b/index.html @@ -12,8 +12,8 @@

    OMDB Movie search

    - - + +
    diff --git a/src/css/style.css b/src/css/style.css index 466947ec..55ffe66f 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1,6 +1,11 @@ /* font-family: 'Source Sans Pro', sans-serif; */ @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro"); +:root { + --primary-color: #f1f1f1; + --secondary-color: #fdb813; +} + body { font-family: "Source Sans Pro", sans-serif; } @@ -13,15 +18,33 @@ body { /* Search form */ .search-form { margin-bottom: 60px; + background-color: var(--primary-color); + padding: 30px; +} + +.search-form input.movie-request__input { + width: calc(100% - 140px); + padding: 15px; + font-size: 1.1rem; + color: var(--secondary-color); +} + +.movie-request__submit { + width: 100px; + padding: 20px; + border: none; + background-color: var(--secondary-color); + color: #fff; + font-size: 0.875rem; } /* Movies list */ .movie-list-wrapper { display: grid; grid-template-columns: 200px auto; - padding-bottom: 30px; + padding: 30px; margin-bottom: 30px; - border-bottom: 1px solid #f1f1f1; + background-color: var(--primary-color); } .movie-info__moreinfo { @@ -31,11 +54,17 @@ body { width: 100px; height: 40px; border: none; - background-color: #f1f1f1; + background-color: var(--secondary-color); + color: #fff; + font-size: 0.875rem; } +.movie-info__title { + border-bottom: 2px solid var(--secondary-color); +} .movie-info__imdb-link { display: block; + color: #000; } .movie-poster img { From 55f98ebc915bc0ad6ca5d5da95108ac10f30cf9d Mon Sep 17 00:00:00 2001 From: Ralph Date: Sat, 9 Jun 2018 13:03:46 +0100 Subject: [PATCH 12/20] Responsive css fixes --- index.html | 4 +-- src/css/style.css | 63 +++++++++++++++++++++++++++++++++++++++++------ 2 files changed, 58 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index e90f0a70..5871e333 100644 --- a/index.html +++ b/index.html @@ -9,9 +9,9 @@
    -

    OMDB Movie search

    +

    OMDB Movie search

    -
    +
    diff --git a/src/css/style.css b/src/css/style.css index 55ffe66f..ab531169 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -8,11 +8,22 @@ body { font-family: "Source Sans Pro", sans-serif; + margin: 0; + padding: 0; } .container { - width: 80%; - max-width: 1200px; - margin: 0 auto; + width: 100%; + max-width: 100%; +} + +h1.main-heading { + padding-left: 30px; +} + +@media (min-width: 768px) { + h1.main-heading { + padding-left: 0; + } } /* Search form */ @@ -22,15 +33,32 @@ body { padding: 30px; } +@media (min-width: 768px) { + .container { + width: 80%; + max-width: 1200px; + margin: 0 auto; + } +} + +.movie-request__form { + display: block; +} +@media (min-width: 768px) { + .movie-request__form { + display: flex; + } +} + .search-form input.movie-request__input { - width: calc(100% - 140px); + width: calc(100% - 36px); padding: 15px; font-size: 1.1rem; color: var(--secondary-color); } .movie-request__submit { - width: 100px; + width: 100%; padding: 20px; border: none; background-color: var(--secondary-color); @@ -38,14 +66,28 @@ body { font-size: 0.875rem; } +@media (min-width: 768px) { + .movie-request__submit { + width: 100px; + } + .search-form input.movie-request__input { + width: calc(100% - 140px); + } +} + /* Movies list */ .movie-list-wrapper { display: grid; - grid-template-columns: 200px auto; + grid-template-columns: 100%; padding: 30px; margin-bottom: 30px; background-color: var(--primary-color); } +@media (min-width: 480px) { + .movie-list-wrapper { + grid-template-columns: 200px auto; + } +} .movie-info__moreinfo { display: block; @@ -69,7 +111,14 @@ body { .movie-poster img { width: 100%; - max-width: 150px; + max-width: 100%; +} + +@media (min-width: 480px) { + .movie-poster img { + width: 100%; + max-width: 150px; + } } /* Movie more info details */ From 9b7d466c551a7a5464f17749d002415eb83097a6 Mon Sep 17 00:00:00 2001 From: Ralph Date: Sat, 9 Jun 2018 13:57:29 +0100 Subject: [PATCH 13/20] Added show/hide functionality to More info button --- src/js/index.js | 46 +++++++++++++++++++++++++++++----------------- 1 file changed, 29 insertions(+), 17 deletions(-) diff --git a/src/js/index.js b/src/js/index.js index 6c71b7bc..3cd44f71 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -51,10 +51,6 @@ function movieListFetch(movieRequest) { }); } -// function movieFetch() { - -// } - // Form event handler form.addEventListener("submit", function(e) { e.preventDefault(); @@ -81,19 +77,35 @@ resultsPlaceholder.addEventListener("click", function(e) { // movieParentNode.append(movieMarkup); // console.log(data.Plot); - // More info elements to display - const infoToDisplay = ["Genre", "Plot", "Runtime", "Awards"]; - const html = Object.keys(data) - .map(function(key) { - if (infoToDisplay.indexOf(key) !== -1) { - return `
  • ${key}: ${data[key]}
    • `; - } - }) - .join(""); - const moreInfoList = document.createElement("ul"); - moreInfoList.setAttribute("class", "movie-info__moreinfo-details"); - moreInfoList.innerHTML = html; - movieParentNode.appendChild(moreInfoList); + // Show/hide the list + if (movieParentNode.querySelector(".movie-info__moreinfo-details")) { + // Remove list + movieParentNode + .querySelector(".movie-info__moreinfo-details") + .remove(); + + // Update button text + e.target.textContent = "More Info"; + } else { + // Create list with movie details + const infoToDisplay = ["Genre", "Plot", "Runtime", "Awards"]; + const html = Object.keys(data) + .map(function(key) { + if (infoToDisplay.indexOf(key) !== -1) { + return `
  • ${key}: ${data[key]}
    • `; + } + }) + .join(""); + + // Update button text + e.target.textContent = "Close"; + + // Append list + const moreInfoList = document.createElement("ul"); + moreInfoList.setAttribute("class", "movie-info__moreinfo-details"); + moreInfoList.innerHTML = html; + movieParentNode.append(moreInfoList); + } }) .catch(error => { console.error(error); From f5045413cce3e67cb3c81716443eefdd78b71ca0 Mon Sep 17 00:00:00 2001 From: Ralph Date: Sat, 9 Jun 2018 14:10:21 +0100 Subject: [PATCH 14/20] Added link icon --- src/js/index.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/js/index.js b/src/js/index.js index 3cd44f71..a0336465 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -32,7 +32,7 @@ function movieListFetch(movieRequest) { }
    IMDB + }">IMDb ↗ @@ -88,7 +88,13 @@ resultsPlaceholder.addEventListener("click", function(e) { e.target.textContent = "More Info"; } else { // Create list with movie details - const infoToDisplay = ["Genre", "Plot", "Runtime", "Awards"]; + const infoToDisplay = [ + "Genre", + "Plot", + "Runtime", + "Awards", + "Language" + ]; const html = Object.keys(data) .map(function(key) { if (infoToDisplay.indexOf(key) !== -1) { From 61010ccc504d4267967a245513610682c5ed57fc Mon Sep 17 00:00:00 2001 From: Ralph Date: Sat, 9 Jun 2018 14:32:30 +0100 Subject: [PATCH 15/20] Movie details fetch refactor --- src/js/index.js | 130 +++++++++++++++++++++++++----------------------- 1 file changed, 67 insertions(+), 63 deletions(-) diff --git a/src/js/index.js b/src/js/index.js index a0336465..f69bef13 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -1,11 +1,12 @@ -const omdbAPIKey = "aba7af8e"; +const OMBbAPIKey = "aba7af8e"; const form = document.querySelector("#movie-request__form"); -const movieRequest = form.querySelector("#movie-request__input"); +const searchInput = form.querySelector("#movie-request__input"); const resultsPlaceholder = document.querySelector("#search-results"); -// Movie fetch -function movieListFetch(movieRequest) { - fetch(`http://www.omdbapi.com/?s=${movieRequest}&apikey=${omdbAPIKey}`) +// Movie list fetch +// @param Terms to search +function movieListFetch(searchInput) { + fetch(`http://www.omdbapi.com/?s=${searchInput}&apikey=${OMBbAPIKey}`) .then(response => response.json()) .then(data => { // data results array @@ -50,72 +51,75 @@ function movieListFetch(movieRequest) { // debugger; }); } +// Title details fetch +// @param Movie title +// @param event object +function movieFetch(title, e) { + const movieParentNode = e.target.parentNode; + const movieInfoWrapper = document.querySelector("movie-info"); + fetch(`http://www.omdbapi.com/?t=${title}&apikey=${OMBbAPIKey}`) + .then(response => { + // console.warn(response); + return response.json(); + }) + .then(data => { + // const movieMarkup = ` + //
    + //

    ${data.Plot}

    + //
    + // `; + // movieParentNode.append(movieMarkup); + // console.log(data.Plot); + + // Show/hide the list + if (movieParentNode.querySelector(".movie-info__moreinfo-details")) { + // Remove list + movieParentNode.querySelector(".movie-info__moreinfo-details").remove(); + + // Update button text + e.target.textContent = "More Info"; + } else { + // Create list with movie details + const infoToDisplay = [ + "Genre", + "Plot", + "Runtime", + "Awards", + "Language" + ]; + const html = Object.keys(data) + .map(function(key) { + if (infoToDisplay.indexOf(key) !== -1) { + return `
  • ${key}: ${data[key]}
    • `; + } + }) + .join(""); + + // Update button text + e.target.textContent = "Close"; + + // Append list + const moreInfoList = document.createElement("ul"); + moreInfoList.setAttribute("class", "movie-info__moreinfo-details"); + moreInfoList.innerHTML = html; + movieParentNode.append(moreInfoList); + } + }) + .catch(error => { + console.error(error); + // debugger; + }); +} // Form event handler form.addEventListener("submit", function(e) { e.preventDefault(); - movieListFetch(movieRequest.value); + movieListFetch(searchInput.value); }); // More info button event handler resultsPlaceholder.addEventListener("click", function(e) { if (e.target.id == "movie-info__moreinfo") { - const movieParentNode = e.target.parentNode; - const movieInfoWrapper = document.querySelector("movie-info"); - const title = e.target.attributes["data-title"].value; - fetch(`http://www.omdbapi.com/?t=${title}&apikey=${omdbAPIKey}`) - .then(response => { - // console.warn(response); - return response.json(); - }) - .then(data => { - // const movieMarkup = ` - //
    - //

    ${data.Plot}

    - //
    - // `; - // movieParentNode.append(movieMarkup); - // console.log(data.Plot); - - // Show/hide the list - if (movieParentNode.querySelector(".movie-info__moreinfo-details")) { - // Remove list - movieParentNode - .querySelector(".movie-info__moreinfo-details") - .remove(); - - // Update button text - e.target.textContent = "More Info"; - } else { - // Create list with movie details - const infoToDisplay = [ - "Genre", - "Plot", - "Runtime", - "Awards", - "Language" - ]; - const html = Object.keys(data) - .map(function(key) { - if (infoToDisplay.indexOf(key) !== -1) { - return `
  • ${key}: ${data[key]}
    • `; - } - }) - .join(""); - - // Update button text - e.target.textContent = "Close"; - - // Append list - const moreInfoList = document.createElement("ul"); - moreInfoList.setAttribute("class", "movie-info__moreinfo-details"); - moreInfoList.innerHTML = html; - movieParentNode.append(moreInfoList); - } - }) - .catch(error => { - console.error(error); - // debugger; - }); + movieFetch(e.target.attributes["data-title"].value, e); } }); From 59cb74776e1864c809c8122e51e8b9bf3b8b76c3 Mon Sep 17 00:00:00 2001 From: Ralph Date: Sun, 10 Jun 2018 17:18:23 +0100 Subject: [PATCH 16/20] Added results navigation --- index.html | 10 +++++- src/css/style.css | 33 ++++++++++++++++++- src/js/index.js | 81 ++++++++++++++++++++++++++++++++++++++++------- 3 files changed, 111 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 5871e333..7cab38a9 100644 --- a/index.html +++ b/index.html @@ -9,13 +9,21 @@
    -

    OMDB Movie search

    +

    OMDb Movie search

    +
    +

    +
    +
      +
    • PREV
      • +
    • +
    • NEXT
      • +
    diff --git a/src/css/style.css b/src/css/style.css index ab531169..06113784 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -28,7 +28,7 @@ h1.main-heading { /* Search form */ .search-form { - margin-bottom: 60px; + /* margin-bottom: 60px; */ background-color: var(--primary-color); padding: 30px; } @@ -126,3 +126,34 @@ ul.movie-info__moreinfo-details { list-style-type: none; padding-left: 0; } + +/* Errors */ +.error-box { + display: none; + width: calc(100% - 44px); + color: #fff; + background-color: tomato; + padding: 10px 20px; +} + +/* Pagination */ +.pagination { + list-style-type: none; + visibility: hidden; + display: flex; + justify-content: flex-end; + width: 100%; + padding-left: 0; +} + +.pagination-index { + margin: 0 20px; +} + +/* .pagination li { +} */ + +.pagination li:hover { + cursor: pointer; + opacity: 0.7; +} diff --git a/src/js/index.js b/src/js/index.js index f69bef13..71a7beac 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -2,16 +2,50 @@ const OMBbAPIKey = "aba7af8e"; const form = document.querySelector("#movie-request__form"); const searchInput = form.querySelector("#movie-request__input"); const resultsPlaceholder = document.querySelector("#search-results"); +const pagination = document.querySelector("#pagination"); +const paginationIndex = pagination.querySelector("#pagination-index"); +const nextPage = pagination.querySelector("#next-page"); +const prevPage = pagination.querySelector("#prev-page"); +let page = 1; + +// Results pagination +// @param {number} Next page to go +// @parem {number} Total search results +function paginate(page, totalResults) { + const totalPages = Math.ceil(totalResults / 10); + if (totalResults > 10) { + pagination.setAttribute("style", "visibility:visible"); + paginationIndex.innerHTML = ` ${page}/${totalPages} `; + if (page <= 1) { + prevPage.setAttribute("style", "visibility:hidden"); + nextPage.setAttribute("style", "visibility:visible"); + } else if (page > 1 && page !== totalPages) { + prevPage.setAttribute("style", "visibility:visible"); + nextPage.setAttribute("style", "visibility:visible"); + } else if (page === totalPages) { + prevPage.setAttribute("style", "visibility:visible"); + nextPage.setAttribute("style", "visibility:hidden"); + } + } else { + prevPage.setAttribute("style", "visibility:hidden"); + } +} // Movie list fetch -// @param Terms to search -function movieListFetch(searchInput) { - fetch(`http://www.omdbapi.com/?s=${searchInput}&apikey=${OMBbAPIKey}`) +// @param {string} Terms to search +// @parem {number} Next page to go +function movieListFetch(searchInput, pageToGo) { + fetch( + `http://www.omdbapi.com/?s=${searchInput}&apikey=${OMBbAPIKey}&page=${pageToGo}` + ) .then(response => response.json()) .then(data => { - // data results array - const movieData = data.Search; + // Pagination + paginate(pageToGo, data.totalResults); + page = page + 1; + // Movie markup for every search result + const movieData = data.Search; const movieMarkup = ` ${movieData .map( @@ -44,16 +78,16 @@ function movieListFetch(searchInput) { .join("")} `; resultsPlaceholder.innerHTML = movieMarkup; - // console.log(movieData); }) .catch(error => { - console.error(error); - // debugger; + errorDisplay("Nothing found."); + // console.error(error); }); } + // Title details fetch -// @param Movie title -// @param event object +// @param {string} Movie title +// @param {Object} event object function movieFetch(title, e) { const movieParentNode = e.target.parentNode; const movieInfoWrapper = document.querySelector("movie-info"); @@ -111,10 +145,26 @@ function movieFetch(title, e) { }); } +// Error display box +// @param {string} Error message to display +function errorDisplay(msg) { + const errorBox = document.querySelector("#error-box"); + errorBox.textContent = msg; + errorBox.setAttribute("style", "display:block"); + setTimeout(function() { + errorBox.setAttribute("style", "display:none"); + }, 5000); +} + // Form event handler form.addEventListener("submit", function(e) { e.preventDefault(); - movieListFetch(searchInput.value); + // Reset pagination + page = 1; + pagination.setAttribute("style", "visibility:hidden"); + + // Fetch results + movieListFetch(searchInput.value, page); }); // More info button event handler @@ -123,3 +173,12 @@ resultsPlaceholder.addEventListener("click", function(e) { movieFetch(e.target.attributes["data-title"].value, e); } }); + +// Pagination event handlers +nextPage.addEventListener("click", function() { + movieListFetch(searchInput.value, page); +}); +prevPage.addEventListener("click", function() { + movieListFetch(searchInput.value, page - 2); + page = page - 2; +}); From 39879bf4d53a7fefa18db2ce8725640914d16745 Mon Sep 17 00:00:00 2001 From: Ralph Date: Sun, 10 Jun 2018 21:27:23 +0100 Subject: [PATCH 17/20] Added search filters --- index.html | 15 +++++++++++++++ src/css/style.css | 30 ++++++++++++++++++++++++++++++ src/js/index.js | 46 +++++++++++++++++++++++++++++++++------------- 3 files changed, 78 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 7cab38a9..b9028fcc 100644 --- a/index.html +++ b/index.html @@ -14,6 +14,21 @@

    OMDb Movie search

    + +
    diff --git a/src/css/style.css b/src/css/style.css index 06113784..04131271 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -10,6 +10,7 @@ body { font-family: "Source Sans Pro", sans-serif; margin: 0; padding: 0; + font-size: 16px; } .container { width: 100%; @@ -47,6 +48,7 @@ h1.main-heading { @media (min-width: 768px) { .movie-request__form { display: flex; + flex-wrap: wrap; } } @@ -75,6 +77,34 @@ h1.main-heading { } } +/* Search filters */ +.movie-request__filters-list { + width: 100%; + margin-top: 10px; + padding-left: 9px; +} +.movie-request__filters-list.hidden { + display: none; +} +.movie-request__filters-list select { + margin-right: 10px; +} +.movie-request__filters-list label { + font-size: 0.875rem; +} + +.movie-request__filters-toggle { + border: none; + background-color: transparent; + margin-top: 10px; + font-size: 0.875rem; +} + +.movie-request__filters-toggle:hover { + cursor: pointer; + opacity: 0.7; +} + /* Movies list */ .movie-list-wrapper { display: grid; diff --git a/src/js/index.js b/src/js/index.js index 71a7beac..52fd3091 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -34,9 +34,12 @@ function paginate(page, totalResults) { // Movie list fetch // @param {string} Terms to search // @parem {number} Next page to go -function movieListFetch(searchInput, pageToGo) { +function movieListFetch(searchInput, pageToGo, type = "", year = "") { + console.log( + `http://www.omdbapi.com/?s=${searchInput}&apikey=${OMBbAPIKey}&y=${year}&t=${type}&page=${pageToGo}` + ); fetch( - `http://www.omdbapi.com/?s=${searchInput}&apikey=${OMBbAPIKey}&page=${pageToGo}` + `http://www.omdbapi.com/?s=${searchInput}&apikey=${OMBbAPIKey}&y=${year}&t=${type}&page=${pageToGo}` ) .then(response => response.json()) .then(data => { @@ -97,19 +100,10 @@ function movieFetch(title, e) { return response.json(); }) .then(data => { - // const movieMarkup = ` - //
    - //

    ${data.Plot}

    - //
    - // `; - // movieParentNode.append(movieMarkup); - // console.log(data.Plot); - // Show/hide the list if (movieParentNode.querySelector(".movie-info__moreinfo-details")) { // Remove list movieParentNode.querySelector(".movie-info__moreinfo-details").remove(); - // Update button text e.target.textContent = "More Info"; } else { @@ -156,15 +150,41 @@ function errorDisplay(msg) { }, 5000); } -// Form event handler +// Generate year filter select options +function yearsDropdown() { + let yearsHTML = ['']; + for (let i = new Date().getFullYear(); i > 1900; i -= 1) { + yearsHTML.push(``); + } + document.querySelector( + "#movie-request__filters-year" + ).innerHTML = yearsHTML.join(""); +} + +yearsDropdown(); + +// Form submit event handler form.addEventListener("submit", function(e) { + const type = document.querySelector("#movie-request__filters-type").value; + const year = document.querySelector("#movie-request__filters-year").value; + e.preventDefault(); // Reset pagination page = 1; pagination.setAttribute("style", "visibility:hidden"); // Fetch results - movieListFetch(searchInput.value, page); + movieListFetch(searchInput.value, page, type, year); +}); + +// Form filters toggle event handler +form.addEventListener("click", function(e) { + if (e.target.id == "movie-request__filters-toggle") { + const filters = document.querySelector("#movie-request__filters-list"); + filters.classList.toggle("hidden"); + + console.log(filters.display); + } }); // More info button event handler From a8fc2a13c3758b10651ad84332cdd8b188430607 Mon Sep 17 00:00:00 2001 From: Ralph Date: Sun, 10 Jun 2018 22:54:16 +0100 Subject: [PATCH 18/20] Working on autocomplete --- index.html | 2 ++ src/css/style.css | 20 ++++++++++++++++ src/js/index.js | 58 +++++++++++++++++++++++++++++++++++++++++------ 3 files changed, 73 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index b9028fcc..87bf71d7 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,8 @@

    OMDb Movie search

    +
      +