constructorlabs · Ahmed-username · Jun 8, 2018 · Jun 8, 2018 · Jun 8, 2018 · Jun 10, 2018
diff --git a/code.js b/code.js
@@ -0,0 +1,122 @@
+//varibles
+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=[];
+
+//functions
+function fetching()
+{
+
+  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("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}`);
+  if(movie.childElementCount<9){
+    let newNode=document.createElement("li");
+    newNode.classList.add("details");
+    for(let value in data)
+      {
+        if((value=="Poster") || (value=="Response") || (value=="Ratings")) {
+          // do nothing
+        }
+
+        else{
+          newNode.innerHTML+=`${value}: ${data[value]} <br>`;
+        }
+
+      }
+    movie.appendChild(newNode);
+    }
+}
+
+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.id=movie[value];
+      newNode.innerHTML+=`<a href=https://www.imdb.com/title/${movie[value]}/> LINKK </a> <br>`;
+    }
+    else if(value=="Poster"){
+      newNode.innerHTML+=`<img src=${movie[value]}></img> <br>`;
+    }
+    else{
+      newNode.innerHTML+=`${value}: ${movie[value]} <br>`;
+    }
+  }
+  newNode.innerHTML+=`<button class="fav" type="button">add to fav </button>`;
+  myDiv.appendChild(newNode);
+});
+}
+
+function submitHandler(event){
+  event.preventDefault();
+  myDiv.innerHTML="";
+  fetching();
+}
+
+function resetHandler(){
+  myDiv.innerHTML="";
+}
+function favHandler(event)
+{
+
+  if(event.target.classList.value=="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);
+  }
+}
+
+function showFav(event){
+
+}
+
+//body
+myForm.addEventListener("submit", submitHandler);
+myDiv.addEventListener("click", favHandler);
+myForm.addEventListener("reset", resetHandler);
+myDropBox.addEventListener("change",showFav);
diff --git a/index.html b/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+
+
+</head>
+<body>
+
+  <form class="Form">
+    <input id="searchfield" placeholder="enter" >
+    <button type="reset">reset</button>
+    <button type="submit">submit</button>
+  </form>
+  <label> favourite movies: </label>
+    <select class="dropBox"> </select>
+  <div class="movies"> results here  </div>
+
+<script src="code.js"> </script>
+<link rel="stylesheet" type="text/css" href="style.css" >
+</body>
+</html>
diff --git a/style.css 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;
+}