From 24a3e721ee4fea823a8ccd164bec4144514a1824 Mon Sep 17 00:00:00 2001 From: Jose Sanchez Date: Fri, 8 Jun 2018 10:21:03 +0100 Subject: [PATCH 1/3] first commit --- index.html | 23 +++++++++++++++++++++++ index.js | 1 + 2 files changed, 24 insertions(+) create mode 100644 index.html create mode 100644 index.js diff --git a/index.html b/index.html new file mode 100644 index 00000000..24ac5ef8 --- /dev/null +++ b/index.html @@ -0,0 +1,23 @@ + + + + + + + Document + + +
+
+ + +
+
+ +
+ + +
+ + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 00000000..b078170a --- /dev/null +++ b/index.js @@ -0,0 +1 @@ +console.log("hello blonde beer") \ No newline at end of file From 5fbbe0390bd3c70eed86a9aa1b75773a0f3c89e8 Mon Sep 17 00:00:00 2001 From: Jose Sanchez Date: Fri, 8 Jun 2018 13:54:11 +0100 Subject: [PATCH 2/3] Fetch is logging each movie --- index.html | 6 +++--- index.js | 44 +++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 46 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 24ac5ef8..86b91662 100644 --- a/index.html +++ b/index.html @@ -8,9 +8,9 @@
-
- - + + +
diff --git a/index.js b/index.js index b078170a..0aeb94d9 100644 --- a/index.js +++ b/index.js @@ -1 +1,43 @@ -console.log("hello blonde beer") \ No newline at end of file + +//this are my handles-variables to access html +const form = document.querySelector(".form") +const text = document.querySelector(".userInput") +const submit = document.querySelector(".submitButton") + + +function addMovie (movie){ + console.log(movie); + return movie; +} + + +function getMovies (movie) { + fetch(`http://www.omdbapi.com/?s=${movie}&apikey=b91b4611`) + .then(function(response){ + return response.json() + }) + .then(function(data){ + //console.log(data.Search) + return data.Search.forEach(function(item){ + addMovie(item); + }) + }) +} + +// adds a listener to the submit button +form.addEventListener('submit', function (event){ + event.preventDefault(); + const searchQueryValue = text.value + getMovies(searchQueryValue) +}) + + + + + +/* +fetch('http movie DataBase'). +then (response convert to response.json)) +then (getData and display in HTML) +*/ + From a1ef1438ac9dde2f1926965c4913c710dc13b3c0 Mon Sep 17 00:00:00 2001 From: Jose Sanchez Date: Fri, 8 Jun 2018 17:09:59 +0100 Subject: [PATCH 3/3] all working --- .DS_Store | Bin 0 -> 6148 bytes index.html | 23 ++++++------ index.js | 67 ++++++++++++++++++---------------- styles.css | 3 ++ styling.html | 99 +++++++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 150 insertions(+), 42 deletions(-) create mode 100644 .DS_Store create mode 100644 styles.css create mode 100644 styling.html diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..5008ddfcf53c02e82d7eee2e57c38e5672ef89f6 GIT binary patch literal 6148 zcmeH~Jr2S!425mzP>H1@V-^m;4Wg<&0T*E43hX&L&p$$qDprKhvt+--jT7}7np#A3 zem<@ulZcFPQ@L2!n>{z**++&mCkOWA81W14cNZlEfg7;MkzE(HCqgga^y>{tEnwC%0;vJ&^%eQ zLs35+`xjp>T0 + Document + - -
-
- - -
-
- -
- + +
+
+ + + +
+
- + + \ No newline at end of file diff --git a/index.js b/index.js index 0aeb94d9..17e569bd 100644 --- a/index.js +++ b/index.js @@ -1,43 +1,48 @@ - //this are my handles-variables to access html -const form = document.querySelector(".form") -const text = document.querySelector(".userInput") -const submit = document.querySelector(".submitButton") - - -function addMovie (movie){ - console.log(movie); - return movie; +const form = document.querySelector(".form"); +const text = document.querySelector(".userInput"); +const submit = document.querySelector(".submitButton"); +const movieDiv = document.querySelector("#results"); + +function parseMovies(movies) { + return movies + .map(function(movie) { + return ` +
+ +

${movie.Title}

+

Release year: ${movie.Year}

+ + +
+ `; + }) + .join(""); } - -function getMovies (movie) { - fetch(`http://www.omdbapi.com/?s=${movie}&apikey=b91b4611`) - .then(function(response){ - return response.json() - }) - .then(function(data){ - //console.log(data.Search) - return data.Search.forEach(function(item){ - addMovie(item); - }) - }) +function getMovies(movie) { + text.value = ""; + movieDiv.innerHTML = ""; + + fetch(`http://www.omdbapi.com/?s=${movie}&apikey=b91b4611`) + .then(function(response) { + return response.json(); + }) + .then(function(data) { + movieDiv.innerHTML = parseMovies(data.Search); + }) + .catch(console.log); } // adds a listener to the submit button -form.addEventListener('submit', function (event){ - event.preventDefault(); - const searchQueryValue = text.value - getMovies(searchQueryValue) -}) - - - - +form.addEventListener("submit", function(event) { + event.preventDefault(); + const searchQueryValue = text.value; + getMovies(searchQueryValue); +}); /* fetch('http movie DataBase'). then (response convert to response.json)) then (getData and display in HTML) */ - diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..23b5e0d6 --- /dev/null +++ b/styles.css @@ -0,0 +1,3 @@ +.app { + background-color: lightpink; +} diff --git a/styling.html b/styling.html new file mode 100644 index 00000000..496b19dd --- /dev/null +++ b/styling.html @@ -0,0 +1,99 @@ + + + + + + + Document + + +
+
+ + + +
+ +
+ + \ No newline at end of file