constructorlabs · phoebedg · Jun 8, 2018 · Jun 8, 2018 · Jun 8, 2018 · Jun 8, 2018
diff --git a/index.css b/index.css
@@ -0,0 +1,129 @@
+body {
+    background-color: crimson;
+    height: auto;
+    overflow-y: scroll;
+    position: relative;
+}
+
+.background {
+    height: auto;
+}
+
+.header {
+    position: fixed;
+    top: 0px;
+    z-index: 1;
+    right: 0;
+    left: 0;
+    background-color: crimson;
+}
+
+#title {
+    margin: auto;
+    text-align: center;
+    padding-top: 30px;
+    font-family: 'Julius Sans One', sans-serif;
+    font-size: 75px;
+    font-weight: bold;
+    text-shadow: 4px 4px red;
+}
+
+.moviereel {
+    width: 70px;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 20px;
+    border: none;
+    border-radius: 50%;
+    box-shadow: 4px 4px red;
+}
+
+.form {
+    margin: auto;
+    margin-top: 30px;
+    text-align: center;
+    padding: 5px;
+}
+
+.input {
+    width: 50%;
+    padding: 12px 20px;
+    margin: 8px 0;
+    border: 2px solid red;
+    border-radius: 5px;
+    box-shadow: 4px 4px red;
+}
+
+.button {
+    background-color: white; /* Green */
+    border: none;
+    border-radius: 5px;
+    color: red;
+    padding: 9.5px 18px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    font-family: 'Roboto', sans-serif;
+    box-shadow: 4px 4px red;
+}
+
+.movieinfo {
+   display: flex;
+   margin-top: 100px;
+}
+
+.moviecard {
+    margin: 20px;
+    margin-top: 250px;
+    width: 250px;
+    position: relative;
+    font-family: 'Roboto', sans-serif;
+}
+
+.poster {
+    width: 250px;
+    height: 370px;
+    padding-bottom: 10px;
+}
+
+.cardtext {
+    margin: auto;
+    padding: 10px;
+    text-align: center;
+    border-style: solid;
+    border-width: 1px;
+    border-color: white;
+    border-radius: 5px;
+    font-family: 'Roboto', sans-serif;
+    background-color: rgba(255,255,255, 0.5);
+    box-shadow: 5px 1px 1px red;
+}
+
+.movieheading {
+    height: auto;
+}
+
+.infocard {
+    text-align: center;
+    height: auto;
+    padding: 15px;
+    border-style: solid;
+    border-width: 1px;
+    border-color: white;
+    border-radius: 5px;
+    font-family: 'Roboto', sans-serif;
+    background-color: rgba(255,255,255, 0.5);
+    box-shadow: 5px 1px 1px red;
+}
+
+.detailedinfo {
+    overflow-y: scroll;
+    margin: auto;
+    margin-top: 25px;
+    margin-bottom: 25px;
+    padding: 10px;
+    height: auto;
+    width: 600px;
+}
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">
+    <title>Document</title>
+    <link rel="stylesheet" href="./index.css">
+    <link href="https://fonts.googleapis.com/css?family=Cinzel|Roboto|Julius+Sans+One" rel="stylesheet">
+</head>
+
+<body>
+    <div class="background">
+        <div class="header">
+        <h1 id="title">OPEN MOVIE DATABASE SEARCH</h1>
+        <img class="moviereel" src="/Users/phoebedg/workspace/week-2/day-5/project-cinema/moviereel.png" alt="Movie Reel">
+        <form id="textinput" class="form" onclick="window.scrollTo(0, 0);">
+            <input id="placeholder" class="input" autofocus></input>
+            <button id="submitbutton" class="button" type="submit">Search Movies</button>
+        </form>
+        </div>
+        <div id="movieinfo" class="movieinfo">
+
+        </div>
+        <div id="detailedinfo" class="detailedinfo">
+
+        </div>
+    </div>
+</body>
+<script src="/Users/phoebedg/workspace/week-2/day-5/project-cinema/index.js"></script>
+
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,100 @@
+const form = document.querySelector("#textinput");
+const input = document.querySelector("#placeholder");
+const movieInfo = document.querySelector("#movieinfo");
+const detailInfo = document.querySelector("#detailedinfo");
+// const movietitle = document.querySelector("#movieheading");
+
+// Event Handler "Submit" ==> Returns Movie Results
+function createUrl(input) {
+  const search = input.value.trim();
+  return `http://www.omdbapi.com/?s=${search}&apikey=2c6457b6&`;
+}
+
+function searchFilms(url) {
+  fetch(url)
+    .then(function(response) {
+      return response.json();
+    })
+    .then(function(data) {
+      console.log(data);
+      let html = data.Search.map(function(movie) {
+        return `
+          <div class="moviecard">
+            <a href="https://www.imdb.com/title/${movie.imdbID}/">
+              <img src="${movie.Poster}" class="poster">
+            </a>
+            <div class="cardtext">
+            <h2 id="movieheading" class="movieheading">
+              ${movie.Title}
+            </h2>
+            <h3 class="movieyear">
+              ${movie.Year}
+            </h3>
+            </div>
+          </div>
+        `;
+      }).join("");
+      movieInfo.innerHTML = html;
+      input.value = '';
+      input.focus();
+    })
+    .catch(function(error) {
+      console.log(error);
+    });
+}
+
+function submitForm(event) {
+  event.preventDefault();
+  searchFilms(createUrl(input));
+}
+
+// Event Handler "Click" ==> Returns Specific Movie Detail
+function createUrl2(title) {
+  return `http://www.omdbapi.com/?t=${title}&apikey=2c6457b6&`;
+}
+
+function searchDetail(url2) {
+  fetch(url2)
+    .then(function(response) {
+      return response.json();
+    })
+    .then(function(data) {
+      console.log(data);
+        const html = `
+          <div id="infocard" class="infocard">
+            <p>${data.Plot}</p> 
+          </div>
+        `;
+      detailInfo.innerHTML = html;
+      detailInfo.style.visibility = 'visible';
+    })
+    .catch(function(error) {
+      console.log(error);
+    });
+}
+
+function getInfo(event) {
+  event.preventDefault();
+  if (event.target.id === "movieheading") {
+    const title = event.target.innerText;
+    searchDetail(createUrl2(title));
+  };
+}
+
+// Event Handler "Click" ==> Hides Specific Movie Detail
+function removeInfo() {
+  if (document.getElementById("infocard")) {
+    detailInfo.style.visibility = 'hidden';
+// (Tried removieChild and detach(), this was the answer in the end... + line 69)
+  }
+}
+
+// Scroll up on clicking the form
+function scrollUp() {
+  window.scrollTo(0, 0);
+}
+
+form.addEventListener("submit", submitForm);
+movieInfo.addEventListener("click", getInfo);
+form.addEventListener("click", removeInfo);
+form.on("click", scrollUp());
diff --git a/moviereel.png b/moviereel.png