constructorlabs · Cantem · Jun 11, 2018
diff --git a/.DS_Store b/.DS_Store
diff --git a/index.html b/index.html
@@ -0,0 +1,33 @@
+<!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">
+    <link rel="stylesheet" type="text/css" href="main.css">
+    <title>Movie Search Engine</title>
+  </head>
+
+<body>
+  <div class="container1">
+    <div>
+      <header class="page-title">
+        <h1> search movie engine</h1>
+      </header>
+    </div>
+    <div class="">
+      <div class="submit-area">
+        <form action="" id="find-movie">
+          <input type="text" id="name" name="movname" placeholder="Find a movie">
+          <input type="submit" class="myButton" value="Submit">
+        </form>
+      </div>
+      <div>
+        <h2> Your movies results:</h2>
+        <ul placeholder="results from MSE"class="text_1" id="results"></ul>
+      </div>
+    </div>
+  </div>
+  <script src="index.js"></script>
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,68 @@
+const film = document.querySelector('#find-movie');
+const input = document.querySelector("#name");
+const results = document.querySelector("#results");
+
+function getMovies(movieName){
+  console.log(movieName);
+  fetch(`http://www.omdbapi.com/?s=${movieName}&apikey=40ce55c`)
+    .then(function(response){
+      return response.json();
+    })
+    .then(function(data){
+      const html = data.Search.map(function(movie){
+        return `
+          <li>
+            <a target="_blank" href="https://www.imdb.com/title/${movie.imdbID}">
+              ${movie.Title}
+              ,Release Year:${movie.Year}
+              <img src="${movie.Poster}">
+            </a>
+            <button type="button" class="btn-more" data-imdbID=${movie.imdbID}> More details </button>
+            <div id="placeholderForMoreDetails"> </div>
+          </li>
+        `
+      }).join('');
+      results.innerHTML = html;
+    })
+    .catch(function(error){
+      console.log(error);
+    });
+}
+
+function addMoreDetails(id, button){
+  console.log(id);
+  fetch(`http://www.omdbapi.com/?i=${id}&apikey=40ce55c`)
+  .then(function(response){
+    return response.json();
+  })
+  .then(function(movieInfo){
+    // const details = data.Search.map(function(movieInfo){
+      button.nextSibling.nextSibling.innerHTML = `
+        <li>
+          Director:${movieInfo.Director},
+          Actors: ${movieInfo.Actors},
+          Country: ${movieInfo.Country},
+          Runtimr:${movieInfo.Runtime},
+          Awards: ${movieInfo.Awards}
+        </li>
+      `
+  })
+  .catch(function(error){
+    console.log(error);
+  });
+}
+
+// Bind event handlers
+film.addEventListener('submit', function(event){
+  event.preventDefault();
+  getMovies(input.value);
+});
+
+results.addEventListener('click', function(event){
+  if(event.target.matches('[data-imdbID]')){
+    addMoreDetails(event.target.dataset.imdbid, event.target)
+  }
+})
+
+// Debugging
+// addMoreDetails("tt0372784")// test call÷
diff --git a/main.css b/main.css
@@ -0,0 +1,49 @@
+body {
+  text-align: center;
+  font-family: Impact;
+  background-image:url(https://i.imgur.com/GLIs5QU.jpg);
+
+};
+
+header {
+  color:white;
+  font-size: 20px;
+  margin: 0.2em;
+  padding: 12 2%;
+  height: 10em;
+  text-transform: capitalize;
+}
+
+
+.container1 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  color: white;
+};
+
+
+
+.text_1 {
+  display: flex;
+  justify-content: center;
+  list-style-type: none;
+}
+
+.page-title {
+  font-size: 20px;
+  text-transform: capitalize;
+  background-color: : grey;
+}
+
+#results {
+  list-style-type: none;
+  width:350px;
+  height:150px;
+  color:white;
+  display:inline-block;
+  justify-content: center;
+  flex-direction: column;
+  margin:15px;
+}