constructorlabs · zuberman · Sep 25, 2018 · dmitrigrabov · Sep 27, 2018 · dmitrigrabov
diff --git a/.DS_Store b/.DS_Store
diff --git a/007.mp4 b/007.mp4
diff --git a/READMEZA.md b/READMEZA.md
@@ -0,0 +1,19 @@
+Week 3 Project: Cinema
+
+Functionality:
+-Able to search for films by Title
+-Autosearches above 3 letters (lazy option to be honest)
+-Pagination for next 20 Results
+-Infinite scrolling
+-Able to call/view additional information via modal by clicking on divs
+
+Visual Design
+-Infinite loop video on landing
+-Broadly responsive (including the modal)
+-Simple Design
+-Cursor and hover effects
+
+Issues
+-Spent Saturday trying to make some superfluous stuff work which failed and used up time.
+-Lack of time means I spent no time on making functions pure or implementing BEM
+-Lack of time meant I couldn't finish off Favourites - I think I would have got these working to a basic level
diff --git a/imagefound.png b/imagefound.png
diff --git a/index.html b/index.html
@@ -0,0 +1,59 @@
+<!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>Project Cinema</title>
+  <link rel="stylesheet" href="style.css">
+  <link href="https://fonts.googleapis.com/css?family=Notable" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:900" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Noto+Serif+JP:900" rel="stylesheet">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
+</head>
+
+<body>
+  <header>
+    <h1>Screen Search</h1>
+  </header>
+
+  <form class = "form">
+        <div class = "text-input">
+          <input type="text" class ="textarea" rows="1" cols="50" placeholder="Enter search terms here"></input<br>
+          <!-- <textarea class = "textarea" rows="1" cols="50" placeholder="Enter search terms here"></textarea><br> -->
+          <input class="submit-button" type="submit" value="Search"><input class="next" type="button" value="Next 20 Results"><input class="favourites" type="button" value="View Favourites">
+        </div>
+      </form>
+
+<!-- <button id="modalBtn" class="button"><Click Here</button> -->
+<div id="simpleModal" class="modal">
+    <div class="modal-content">
+      <div class="modal-header">
+          <span class="closeBtn">&times;</span>
+          <h2>Details</h2>
+      </div>
+      <div class="modal-body">
+        </div>
+    </div>
+  </div>
+
+
+<!-- <div id="simpleModal" class="modal">
+  <div class="modal-content">
+    <span class="closeBtn">&times;</span>
+    <p class=inside>Hello...I'm Zuber's modal</p>
+  </div>
+</div> -->
+<!--
+<div class="flip3D">
+  <div class="back">Box 1 - Back</div>
+  <div class="front">Box 1 - Front</div>
+</div> -->
+
+  <div class="main">
+    <video class="video" src="007.mp4" autoplay loop muted></video>
+  </div>
+</body>
+  <!-- <script src="moment.js"></script> -->
+  <script src="index.js"></script>
+  </html>
diff --git a/index.js b/index.js
@@ -0,0 +1,182 @@
+var searchTitle = ""
+var pageNumber = 1;
+const form = document.querySelector(".form");
+let next = document.querySelector(".next");
+let parent = document.querySelector(".main");
+let movieItem = document.querySelectorAll(".movieItem")
+let bodyarea = document.querySelector("body")
+let modalbox = document.querySelector(".modal-body")
+var textArea = document.querySelector(".textarea")
+
+
+
+
+//search just by title (no pagination)
+form.addEventListener("submit", function(event){
+  event.preventDefault()
+  console.log(event.target[0].value)
+    searchTitle = event.target[0].value
+    var url = `http://www.omdbapi.com/?apikey=77164d83&s=${searchTitle}`
+
+    fetch(url)
+        .then(function(response) {
+            return response.json();
+        })
+        .then(function(body) {
+          parent.innerHTML = ""
+          displayTest(body.Search)
+          console.log(body)
+          // textarea.value = ""
+        })
+    })
+
+// function to diplay the returned search items for the main cards view
+  function displayTest(movies) {
+  movies.forEach(function(movie, index) {
+      let movieItem = document.createElement("div")
+      movieItem.setAttribute("data-id",`${movie.imdbID}`)
+      console.log(movieItem);
+      movieItem.className = "movieItem"
+      movieItem.id = `${movie.imdbID}`
+      movieItem.innerHTML = `
+                    <img id="posterImage" src="${movie.Poster}" alt="movie image" onerror="this.src='imagefound.png';">
+                    <h2 data-id="${movie.imdbID}">${movie.Title} (${movie.Year})</h2>
+                    <i class="far fa-star"></i>
+                      `
+                        // <button name="favourite" type="click" value="submit-true">Fave</button>
+      parent.appendChild(movieItem);
+  })
+}
+
+
+//to pull full information
+bodyarea.addEventListener("click", function(event){
+  const movieContainer = event.target.closest(".movieItem")
+  if(event.target.matches(".far")){
+    console.log({event})
+    // [movieId1, movieId2]
+    localStorage.setItem("movieIDs",JSON.stringify([movieContainer.dataset.id]));
+    // then do json parse
+  }
+  else {
+  if(movieContainer){
+    console.log(movieContainer.dataset.id)
+    fetch(`http://www.omdbapi.com/?apikey=77164d83&i=${movieContainer.dataset.id}`)
+        .then(function(response) {
+            return response.json();
+        })
+        .then(function(body) {
+          // parent.innerHTML = ""
+          // displayTest(body.Search)
+          modal.style.display = "flex";
+          console.log(body);
+          displayDetails(body);
+          // textarea.value = ""
+        })
+      }
+  }
+})
+// addEventListener()
+
+//populate contents of modal overlay
+  function displayDetails(body) {
+    // modalbox.innerHTML = "";
+    modalbox.innerHTML = `
+    <ul>
+      <li>Director: ${body.Director}</li>
+      <li>Runtime: ${body.Runtime}</li>
+      <li>IMDB Rating: ${body.imdbRating}</li>
+      <li>IMDB Votes: ${body.imdbVotes}</li>
+      <li>Rating: ${body.Rated}</li>
+      <li>Awards: ${body.Awards}</li>
+      <li>Actors: ${body.Actors}</li>
+    </ul>
+    `
+  }
+
+
+// modal below Here
+//get modal modalelement
+var modal = document.querySelector("#simpleModal");
+//get open modal button
+var modalBtn = document.querySelector("#modalBtn");
+//get close button
+var closeBtn = document.querySelector(".closeBtn");
+
+//listen for open Click
+//modalBtn.addEventListener("click", openModal);
+
+//listen for close Click
+closeBtn.addEventListener("click", closeModal);
+//listen for ourside lcick
+window.addEventListener("click", clickOutside);
+
+//function to open modal
+function openModal(){
+  modal.style.display = "block";
+}
+
+function closeModal(){
+  modal.style.display = "none";
+}
+
+function clickOutside(e){
+  if(e.target == modal){
+    modal.style.display = "none";
+  }
+}
+
+//infinite scrolling
+window.addEventListener('scroll', () => {
+  const scrollable = document.documentElement.scrollHeight - window.innerHeight;
+  const scrolled = window.scrollY;
+  if (Math.ceil(scrolled) === scrollable) {
+    searchQuery = textArea.value
+    pageNumber++
+    var url = `http://www.omdbapi.com/?apikey=77164d83&s=${searchQuery}&page=${[pageNumber]}`
+    event.preventDefault()
+    fetch(url)
+        .then(function(response) {
+            return response.json();
+        })
+        .then(function(body) {
+          // parent.innerHTML = ""
+          displayTest(body.Search)
+        })
+  }
+})
+
+//pagination - next 10
+next.addEventListener("click", function(event){
+    searchQuery = textArea.value
+    pageNumber++
+    var url = `http://www.omdbapi.com/?apikey=77164d83&s=${searchQuery}&page=${[pageNumber]}`
+    event.preventDefault()
+    fetch(url)
+        .then(function(response) {
+            return response.json();
+        })
+        .then(function(body) {
+          parent.innerHTML = ""
+          displayTest(body.Search)
+        })
+    })
+
+//search preview
+textArea.addEventListener("input", function(event){
+  searchTitle = event.target.value
+  if (searchTitle.length > 2) {
+    var url = `http://www.omdbapi.com/?apikey=77164d83&s=${searchTitle}`
+    fetch(url)
+        .then(function(response) {
+            return response.json();
+        })
+        .then(function(body) {
+          parent.innerHTML = ""
+          displayTest(body.Search)
+        })
+    }
+  else {
+    parent.innerHTML = ""
+  }
+  })