constructorlabs · mattceltic85 · Jun 10, 2018 · Jun 10, 2018 · Jun 11, 2018
diff --git a/README.md b/README.md
@@ -17,9 +17,9 @@ To get started, fork and clone the repo at [https://github.com/dmitrigrabov/proj
 
 You should complete as many of the following tasks as you can.
 
-- [ ] Create an HTML page which should have a `form` at the top which contains a text input and a submit button. Below it should have a placeholder for the returned results.
-- [ ] Use JavaScript to capture the submit `event` in your search form, extract the query string from your input and use that to make an API call to the Open Movie Database API to search for films which match the query string using `fetch`. `console.log` the results
-- [ ] Display the data returned by the API including title, year and poster picture
+- [x] Create an HTML page which should have a `form` at the top which contains a text input and a submit button. Below it should have a placeholder for the returned results.
+- [x] Use JavaScript to capture the submit `event` in your search form, extract the query string from your input and use that to make an API call to the Open Movie Database API to search for films which match the query string using `fetch`. `console.log` the results
+- [x] Display the data returned by the API including title, year and poster picture
 - [ ] Adjust your layout to create room for a detailed view of movie information
 - [ ] Capture clicks on your movie results items and use that information to make another request to the API for detailed movie information. `console.log` the returned result
 - [ ] Display the detailed movie result in the in the details view you created earlier

diff --git a/index.html b/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <link rel="stylesheet" href="./styles.css">
+  <script defer src="./main.js"></script>
+</head>
+
+<body>
+
+  <header class="header-style"> Project Cinema - Movie database search engine!
+  </header>
+
+
+
+  <form class="form-box" id="query-film">
+    <div> Search for movie keyword here; </div>
+    <input id="submit-text" type="text">
+    <input type="submit">
+
+  </form>
+
+  <p>
+    <div id="search-query">
+    </div>
+  </p>
+
+  <main class="movie-outputs">
+    <section class="movie-cards" id="result">
+
+    </section>
+
+  </main>
+
+
+</body>
+
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,42 @@
+//add event listener to form button
+document.getElementById("query-film").addEventListener("submit", function(e) {
+  e.preventDefault();
+  //define a constant from submitted text
+  const filmResult = document.getElementById("submit-text").value
+  //add film result as inner HTML text to form section of website to show what user searched for.
+  document.getElementById("search-query").innerHTML = filmResult
+  //base url Below
+  const apiUrl = "http://www.omdbapi.com/?apikey=e39b8524&type=movie&s=" + filmResult;
+  //Api fetch
+  fetch(apiUrl)
+    // .then((res) => {
+    //   return res.json()
+    // }) see below side by side use of old school JS and then arrow function
+    .then(function(res) {
+      return res.json();
+    })
+    .then((apiJson) => {
+      console.log(apiJson.Search);
+
+      // apiJson.Search.forEach(function(movie){
+      //   console.log(movie.Title);
+      //   document.getElementById("search-results").innerHTML += movie.Title + " - " + movie.Year
+
+      let movies = apiJson.Search;
+      let result = "";
+      return movies.forEach(function(movie) {
+        console.log(movie);
+        result +=
+          `<div class="card">
+          <h2> Movie Name: ${movie.Title}</h2>
+          <ul>
+            <h3> Movie Year: ${movie.Year}</h3>
+            <img class="card-image" src="${movie.Poster}" alt="Movie poster">
+          </ul>
+          </div>`
+        document.getElementById('result').innerHTML = result;
+      })
+
+    })
+
+});