From da9c37f4ada04e661b8ea726c43bd3a8f43c08d8 Mon Sep 17 00:00:00 2001 From: Ahmed Date: Fri, 8 Jun 2018 10:08:02 +0100 Subject: [PATCH 1/5] index.html was created comtaining a form with a textarea and a button. Then there is a div below. code.js was created --- code.js | 1 + index.html | 19 +++++++++++++++++++ 2 files changed, 20 insertions(+) create mode 100644 code.js create mode 100644 index.html diff --git a/code.js b/code.js new file mode 100644 index 00000000..77281176 --- /dev/null +++ b/code.js @@ -0,0 +1 @@ +console.log("hello") diff --git a/index.html b/index.html new file mode 100644 index 00000000..64c5bb50 --- /dev/null +++ b/index.html @@ -0,0 +1,19 @@ + + + + + + + Document + + +
+ + + +
+
results here
+ + + + From 3f95731cea2fa3142c51ff9ab81c26541aa625cf Mon Sep 17 00:00:00 2001 From: Ahmed Date: Fri, 8 Jun 2018 13:29:09 +0100 Subject: [PATCH 2/5] fetch was done and results are displayed on li under div --- code.js | 51 ++++++++++++++++++++++++++++++++++++++++++++++++++- index.html | 1 - 2 files changed, 50 insertions(+), 2 deletions(-) diff --git a/code.js b/code.js index 77281176..c0354841 100644 --- a/code.js +++ b/code.js @@ -1 +1,50 @@ -console.log("hello") +//varibles +const myForm = document.querySelector("form"); +const myTextArea= document.querySelector("textarea"); +const myButton = document.querySelector("button"); +const myDiv= document.querySelector("div"); +let search; +//functions +function fetching() +{ + search=myTextArea.value; + fetch(`http://www.omdbapi.com/?s=${search}&apikey=60ece986`) + .then(function(response){ + return response.json(); + }).then(function(jsonData){ + displayMovies(jsonData); + }); + + /*.catch(function(error){ + alert("error"); + }); */ +} + +function displayMovies(data){ + + data.Search.forEach(function(movie){ + let newNode=document.createElement("li"); + for(let value in movie) + { + if(value=="imdbID"){ + newNode.innerHTML+=` LINKK
`; + } + else if(value=="Poster"){ + newNode.innerHTML+=` img
`; + } + else{ + console.log(`${value}: ${movie[value]}`); + newNode.innerHTML+=`${value}: ${movie[value]}
`; + } + } + myDiv.appendChild(newNode); +}); +} + +function submitHandler(event){ + event.preventDefault(); + fetching(); +} + +//body +myForm.addEventListener("submit", submitHandler); diff --git a/index.html b/index.html index 64c5bb50..1591adb7 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,6 @@
-
results here
From 2971c611ada07ebae8bfc26dcd9472bacf6f9fe4 Mon Sep 17 00:00:00 2001 From: Ahmed Date: Fri, 8 Jun 2018 16:06:21 +0100 Subject: [PATCH 3/5] style.css was added --- code.js | 36 +++++++++++++++++++++++------------- index.html | 12 ++++++++---- style.css | 24 ++++++++++++++++++++++++ 3 files changed, 55 insertions(+), 17 deletions(-) create mode 100644 style.css diff --git a/code.js b/code.js index c0354841..d588f231 100644 --- a/code.js +++ b/code.js @@ -1,41 +1,42 @@ //varibles -const myForm = document.querySelector("form"); -const myTextArea= document.querySelector("textarea"); +const myForm = document.querySelector("Form"); +const myTextArea= document.querySelector("#searchfield"); const myButton = document.querySelector("button"); -const myDiv= document.querySelector("div"); +const myDiv= document.querySelector(".movies"); + let search; //functions function fetching() { + search=myTextArea.value; fetch(`http://www.omdbapi.com/?s=${search}&apikey=60ece986`) .then(function(response){ return response.json(); }).then(function(jsonData){ displayMovies(jsonData); - }); - - /*.catch(function(error){ - alert("error"); - }); */ + }).catch(function(error){ + alert("hh") + }); } function displayMovies(data){ data.Search.forEach(function(movie){ let newNode=document.createElement("li"); + newNode.classList.add("movie"); for(let value in movie) { if(value=="imdbID"){ - newNode.innerHTML+=` LINKK
`; + newNode.innerHTML+=` LINKK
`; } else if(value=="Poster"){ - newNode.innerHTML+=` img
`; + newNode.innerHTML+=`
`; } else{ - console.log(`${value}: ${movie[value]}`); - newNode.innerHTML+=`${value}: ${movie[value]}
`; - } + console.log(`${value}: ${movie[value]}`); + newNode.innerHTML+=`${value}: ${movie[value]}
`; + } } myDiv.appendChild(newNode); }); @@ -43,8 +44,17 @@ function displayMovies(data){ function submitHandler(event){ event.preventDefault(); + console.log(myDiv) + myDiv.innerHTML=""; + fetching(); } +function resetHandler(){ + console.log(myDiv) + myDiv.innerHTML=""; +} + //body myForm.addEventListener("submit", submitHandler); +myForm.addEventListener("reset", resetHandler); diff --git a/index.html b/index.html index 1591adb7..567971fd 100644 --- a/index.html +++ b/index.html @@ -5,14 +5,18 @@ Document + + -
- - + + + +
-
results here
+
results here
+ diff --git a/style.css b/style.css new file mode 100644 index 00000000..2fe7dc36 --- /dev/null +++ b/style.css @@ -0,0 +1,24 @@ +* { + box-sizing: border-box; +} + +#searchfield{ + cursor: text; +} +.Form{ + margin: 10px; +} + +.movies{ + background-color: #DBE2C7; + text-align: center; + display: flex; + flex-wrap: wrap; +} + +.movie{ + margin: 10px; + background-color: #C7E2E2; + border: 5px solid black; + padding:10px; +} From c124369dbf579b973c559bbb2a959c651fb63aae Mon Sep 17 00:00:00 2001 From: Ahmed Date: Sun, 10 Jun 2018 19:53:31 +0100 Subject: [PATCH 4/5] added new functions that takes an event when clicked on a movie and view its details --- code.js | 71 ++++++++++++++++++++++++++++++++++++++++++++++++------ index.html | 2 ++ 2 files changed, 65 insertions(+), 8 deletions(-) diff --git a/code.js b/code.js index d588f231..59ea3af5 100644 --- a/code.js +++ b/code.js @@ -1,60 +1,115 @@ //varibles const myForm = document.querySelector("Form"); const myTextArea= document.querySelector("#searchfield"); -const myButton = document.querySelector("button"); +const myButton = document.querySelector(".favButton"); const myDiv= document.querySelector(".movies"); -let search; +let favMovies=[]; + //functions function fetching() { - search=myTextArea.value; + let search=myTextArea.value; fetch(`http://www.omdbapi.com/?s=${search}&apikey=60ece986`) .then(function(response){ return response.json(); }).then(function(jsonData){ displayMovies(jsonData); }).catch(function(error){ - alert("hh") + alert("error") }); } +function fetchingDeatils(im) +{ + let search=myTextArea.value; + fetch(`http://www.omdbapi.com/?i=${im}&apikey=60ece986`) + .then(function(response){ + return response.json(); + }).then(function(jsonData){ + displayDetails(jsonData, im); + }).catch(function(error){ + alert("error") + }); +} + +function displayDetails(data, im){ + const movie=document.querySelector(`#${im}`); + console.log(data.Ratings); + if(movie.childElementCount<9){ + let newNode=document.createElement("li"); + newNode.classList.add("details"); + console.log(data); + for(let value in data) + { + if((value=="Poster") || (value=="Response") || (value=="Ratings")) { + + } + + else{ + newNode.innerHTML+=`${value}: ${data[value]}
`; + } + + } + movie.appendChild(newNode); + } +} + function displayMovies(data){ data.Search.forEach(function(movie){ let newNode=document.createElement("li"); newNode.classList.add("movie"); + newNode.id.add for(let value in movie) { if(value=="imdbID"){ + newNode.id=movie[value]; newNode.innerHTML+=` LINKK
`; } else if(value=="Poster"){ newNode.innerHTML+=`
`; } else{ - console.log(`${value}: ${movie[value]}`); newNode.innerHTML+=`${value}: ${movie[value]}
`; } } + newNode.innerHTML+=``; myDiv.appendChild(newNode); }); } function submitHandler(event){ event.preventDefault(); - console.log(myDiv) myDiv.innerHTML=""; - fetching(); } function resetHandler(){ - console.log(myDiv) myDiv.innerHTML=""; } +function favHandler(event) +{ + if(event.target.classList.value=="fav"){ + favMovies.push(event.target.parentElement); + alert("added to fav"); + } + else if (event.target.classList.value=="movie") { + fetchingDeatils(event.target.id); + + } + + //favMovies.push(event.target) +} + +function showFav(event){ + console.log(favMovies); + alert(favMovies); +} //body myForm.addEventListener("submit", submitHandler); +myDiv.addEventListener("click", favHandler); myForm.addEventListener("reset", resetHandler); +myButton.addEventListener("click", showFav); diff --git a/index.html b/index.html index 567971fd..773a332f 100644 --- a/index.html +++ b/index.html @@ -9,11 +9,13 @@ +
+
results here
From 1e2c8fcec9e3b61304853d0e4efe4da1778632b7 Mon Sep 17 00:00:00 2001 From: Ahmed Date: Mon, 11 Jun 2018 00:07:56 +0100 Subject: [PATCH 5/5] Add to fav button funtionality was implemetted --- code.js | 33 ++++++++++++++++++++------------- index.html | 7 ++++--- 2 files changed, 24 insertions(+), 16 deletions(-) diff --git a/code.js b/code.js index 59ea3af5..d259ac45 100644 --- a/code.js +++ b/code.js @@ -1,8 +1,9 @@ //varibles -const myForm = document.querySelector("Form"); +const myForm = document.querySelector(".Form"); const myTextArea= document.querySelector("#searchfield"); const myButton = document.querySelector(".favButton"); const myDiv= document.querySelector(".movies"); +const myDropBox= document.querySelector(".dropBox"); let favMovies=[]; @@ -36,15 +37,13 @@ function fetchingDeatils(im) function displayDetails(data, im){ const movie=document.querySelector(`#${im}`); - console.log(data.Ratings); if(movie.childElementCount<9){ let newNode=document.createElement("li"); newNode.classList.add("details"); - console.log(data); for(let value in data) { if((value=="Poster") || (value=="Response") || (value=="Ratings")) { - + // do nothing } else{ @@ -61,7 +60,6 @@ function displayMovies(data){ data.Search.forEach(function(movie){ let newNode=document.createElement("li"); newNode.classList.add("movie"); - newNode.id.add for(let value in movie) { if(value=="imdbID"){ @@ -91,25 +89,34 @@ function resetHandler(){ } function favHandler(event) { + if(event.target.classList.value=="fav"){ - favMovies.push(event.target.parentElement); - alert("added to fav"); + let search=favMovies.find(function(item){ + return item==event.target.parentElement.id; + }); + if(search==event.target.parentElement.id){ + alert("movie already in favourite list"); + } + else { + + favMovies.push(event.target.parentElement.id); + newNode=document.createElement("option"); + newNode.id=event.target.parentElement.id; + newNode.textContent=event.target.parentElement.firstChild.data; + myDropBox.appendChild(newNode); + } } else if (event.target.classList.value=="movie") { fetchingDeatils(event.target.id); - } - - //favMovies.push(event.target) } function showFav(event){ - console.log(favMovies); - alert(favMovies); + } //body myForm.addEventListener("submit", submitHandler); myDiv.addEventListener("click", favHandler); myForm.addEventListener("reset", resetHandler); -myButton.addEventListener("click", showFav); +myDropBox.addEventListener("change",showFav); diff --git a/index.html b/index.html index 773a332f..5e3b45ad 100644 --- a/index.html +++ b/index.html @@ -10,12 +10,13 @@ -
- + +
- + +
results here