From 0409f1f3b29b6ae642cb411ce3ad85508ddc597a Mon Sep 17 00:00:00 2001 From: EDEM Y Date: Fri, 8 Jun 2018 10:28:58 +0100 Subject: [PATCH 1/3] folders setup --- index.html | 16 ++++++++++++++++ src/pCinema.js | 0 2 files changed, 16 insertions(+) create mode 100644 index.html create mode 100644 src/pCinema.js diff --git a/index.html b/index.html new file mode 100644 index 00000000..5b5da8e0 --- /dev/null +++ b/index.html @@ -0,0 +1,16 @@ + + + + + + + + + Project Cinema + + + + + + + \ No newline at end of file diff --git a/src/pCinema.js b/src/pCinema.js new file mode 100644 index 00000000..e69de29b From f9e9a39297734d78977a7a9fec8ac40b74bc3bec Mon Sep 17 00:00:00 2001 From: EDEM Y Date: Fri, 8 Jun 2018 13:56:28 +0100 Subject: [PATCH 2/3] Fetch functionality pulling data to logs --- index.html | 14 +++++++++++++- src/pCinema.js | 28 ++++++++++++++++++++++++++++ 2 files changed, 41 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 5b5da8e0..923d112a 100644 --- a/index.html +++ b/index.html @@ -5,11 +5,23 @@ - Project Cinema +
+
+
+ Search movie by name here : + + +
+ + + +
+
+ diff --git a/src/pCinema.js b/src/pCinema.js index e69de29b..6bddd89a 100644 --- a/src/pCinema.js +++ b/src/pCinema.js @@ -0,0 +1,28 @@ +/** + +* +*/ +const myForm = document.querySelector("form"); +const myInput = document.querySelector("input"); +const submit = document.querySelector("button"); + +myForm.addEventListener("submit", function(event) { + event.preventDefault(); + const searchQuery = myInput.value; + + fetch(`http://www.omdbapi.com/?s=${searchQuery}&apikey=b5a3d461`) + .then(function(response) { + return response.json(); + }) + .then(function(myJson) { + console.log(myJson); + }); +}); + +// fetch(`http://www.omdbapi.com/?s=${searchQuery}&apikey=b5a3d461`) +// .then(function(response) { +// return response.json(); +// }) +// .then(function(myJson) { +// console.log(myJson); +// }); From 6e95761fc971e6cb78d5ec24eb356fc54a59c771 Mon Sep 17 00:00:00 2001 From: EDEM Y Date: Mon, 11 Jun 2018 06:59:55 +0100 Subject: [PATCH 3/3] fetch added --- index.html | 8 ++++---- src/pCinema.js | 50 ++++++++++++++++++++++++++++++++++++++++++++------ 2 files changed, 48 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 923d112a..30ac92da 100644 --- a/index.html +++ b/index.html @@ -11,14 +11,14 @@
-
+
Search movie by name here :
- - - +
+

Movies

+
    diff --git a/src/pCinema.js b/src/pCinema.js index 6bddd89a..e59a13b2 100644 --- a/src/pCinema.js +++ b/src/pCinema.js @@ -4,21 +4,58 @@ */ const myForm = document.querySelector("form"); const myInput = document.querySelector("input"); -const submit = document.querySelector("button"); +const submit = document.querySelector("movie"); +// myForm.addEventListener("submit", function(event) { +// event.preventDefault(); +// const searchQuery = myInput.value; +// movieResults(); +// }); + +// function movieResults() { +// fetch(`http://www.omdbapi.com/?s=${searchQuery}&apikey=b5a3d461`) +// .then(function(response) { +// return response.json(); +// }) +// .then(function(myJson) { +// console.log(myJson); +// }); +// } +function createNode(element) { + return document.createElement(element); +} +function append(parent, el) { + return parent.appendChild(el); +} +let searchQuery = myInput.value; +console.log(searchQuery); myForm.addEventListener("submit", function(event) { event.preventDefault(); - const searchQuery = myInput.value; - - fetch(`http://www.omdbapi.com/?s=${searchQuery}&apikey=b5a3d461`) + //const searchQuery = myInput.value; + //console.log(searchQuery); + fetch(`http://www.omdbapi.com/?s=${event.searchQuery}&apikey=b5a3d461`) .then(function(response) { return response.json(); }) - .then(function(myJson) { - console.log(myJson); + .then(function(data) { + let moviesResult = data.results; + return moviesResult.map(function(film) { + let li = createNode("li"), + img = createNode("img"), + span = createNode("span"); + img.src = film.Poster; + span.innerHTML = film.Title; + span.innerHTML = film.Year; + append(li, img); + append(li, span); + append(li, span); + append(ul, li); + }); + //console.log(myJson); }); }); +// function movieResults(s) { // fetch(`http://www.omdbapi.com/?s=${searchQuery}&apikey=b5a3d461`) // .then(function(response) { // return response.json(); @@ -26,3 +63,4 @@ myForm.addEventListener("submit", function(event) { // .then(function(myJson) { // console.log(myJson); // }); +// }