Project cinema from Yel

README.md

@@ -1,54 +1,26 @@
----
-path: "/project-cinema"
-date: "2018-05-28"
-title: "Project cinema"
----
-
-# Project Cinema
-
-We want to create a movie search engine. To power it we will use the [Open Movie Database](http://www.omdbapi.com) API.
-
-To start using the OMDB API you will first need to sign up with them to receive and API key. The key issued to you will allow you 1000 requests per day and you will need to include this key as part of every request.
-
-To get started, fork and clone this repo. Please submit a pull request after your first commit and push commits regularly.
-
-You should complete as many of the following tasks as you can.
-
-- [ ] Work using mobile first, that is create the mobile version first and add tablet and desktop versions after.
-- [ ] 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 element for the returned results.
-- [ ] Use JavaScript to capture the `submit` event in your search form, extract the query string from the text 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
-
-**Movie details**
-
-- [ ] 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. Using event delegation will help you here. `console.log` the returned result
-- [ ] Display the detailed movie result in the in the details view you created earlier
-- [ ] Make your design responsive and ensure it looks great at different screen widths
-
-**Your own feature**
-
-- [ ] Implement any feature you would find useful or interesting
-
-**Stretch goals**
-
-- [ ] Implement pagination so that users can navigate between all movies in search results rather than just the first ten
-- [ ] Create a favourites list. It's up to you how you would add items to favourites. You could add a button or otherwise. Display a list of favourites somewhere on your page.
-- [ ] Make the favourites list sortable. Add `up` and `down` buttons to your favourites which on click will move the result in relevant direction
-- [ ] Save favourites locally using `localStorage` so that favourites persist in browser after refresh
-- [ ] Let's create a search preview. It should listen for change events on input events and submit a search request with current query string. Display the search preview results in an absolute positioned container just below the search box.  
-Hint: You may want to kick of the searching after at least 3 characters have been typed.
-
-## Objectives
-
-* We want to see great looking webpages that work well at all screen widths
-* Your code should have consistent indentation and sensible naming
-* Use lots of concise, reusable functions with a clear purpose
-* Add code comments where it is not immediately obvious what your code does
-* Your code should not throw errors and handle edge cases gracefully. For example not break if server fails to return expected results
-* Use BEM methodology to style your page
-* Try to use pure functions as much as possible, but keep in mind it will not be possible to make all functions pure.
-
-## README.md
-
-When finished, include a README.md in your repo. Someone who is not familiar with the project should be able to look at it and understand what it is and what to do with it. Explain functionality created, mention any outstanding issues and possible features you would include if you had more time. List technologies used to create the app. Include a screenshot of your app in the README.
+Background:
+1. Reel Find is a film search app created for week 3 Constructor Labs weekend project.
+2. The app uses www.omdbapi.com to get film data and display on the main page. 
+
+How it works:
+1. The app loads with a preset search parameter - Batman.
+2. The user can search for desired title by entering the name in the search field. The event listener on the search form will trigger a fetch from the API and return the results on the main page.
+3. Event listener has been added to the main page and the user will get further information on each film by clicking anywhere on the div containing that films poster, title and year. The event listener uses a second fetch (utilising the movie's IMDb ID number to get additional information for this specific film). 
+When user clicks on a different film, the previous film's additional information is removed and the new film's information is displayed.
+4. The app utilises API pagination  - the user can get additional search results by clicking 'load more...' button at the bottom of the main page.
+5. For larger screens the user will see the first movies poster used as a page background.
+6. The user can add favourite films to the 'favouites' section at the bottom of the page by clicking a blue heart next to each film. The heart turns red when a film is favourited. The function uses local storage so the favourites will be saved if the page is reloaded. In order to clear favourites, the user needs to press 'clear my favourites' button which has an event listener which clears local storage.
+
+Notes to self:
+1. Used flex grid for the first time (to arrange the div containing each film) - very useful.
+2. Need to spend time thoroghly planning the final layout and functionality of the application before starting work on it. This week I jumped straight into fetching data and as a result could not use BEM as the whole HTML is disorganised with me adding new sections/divs as I went along. 
+3. In relation to point 2 above, planning should also help with making the code cleaner by utilising more functions and not mutating the variables as much.
+
+If I had more time:
+1. Add 'go to top button' to help navigation;
+2. Provide more informaiton for each film in favourites.
+3. Have the favourites bar display on the side in full-screen mode.
+4. Handle error messages and absent posters.
+5. Add checkboxes to refine search for movies or series only.
+6. Ability to rank favourites.
+7. Ability to remove a single favourite.

index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Reel Deal</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> -->
+    <!-- <script src="main.js"></script> -->
+    <link href="https://fonts.googleapis.com/css?family=Ultra" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
+        crossorigin="anonymous">
+</head>
+
+<body>
+    <div class="app">
+        <header><img class='logo' src="reel.png" width=40px height=40px>
+            <h1 class="web-name">reel deal</h1>
+            <form>
+                <label for="search">search for a movie:</label>
+                <input id="search">
+                <button class="submit-search" type="submit"><i class="search-button fas fa-search"></i></button>
+            </form>
+        </header>
+        <main>
+            <section class="films"></section>
+            <button class="load-next-page">load more...</button>
+            <section class="favourites">
+                <h3>your favourites:</h3>
+                <div class="favourites__divs">
+
+                </div>
+                <button class="clear-favourites">clear all favourites</button>
+            </section>
+
+        </main>
+    </div>
+    <script src="src/index.js"></script>
+</body>
+
+</html>

src/index.js

@@ -0,0 +1,155 @@
+const urlBase = `https://www.omdbapi.com/?apikey=b749b385&`;
+const outputNode = document.querySelector(".films");
+let searchTarget = "";
+let previousSearchTarget = "";
+let addInfoNode = "";
+let pageCounter = 1;
+let movieName = "Batman";
+let posterNode = document.querySelector(".favourites__divs");
+
+
+//fetches movies from API - search by names
+function getMoviesByName(movieName) {
+  return fetch(`${urlBase}s=${movieName}`)
+    .then(function(response) {
+      return response.json();
+    })
+    .then(function(body) {
+      displayFilms(body.Search);
+    });
+}
+
+//default search for when the page loads
+getMoviesByName(movieName);
+
+//creates a list of films by name
+function displayFilms(filmResults) {
+
+  filmResults.forEach(film => {
+    let filmNode = document.createElement("div");
+    filmNode.className = "main__film";
+    filmNode.dataset.imdbid = `${film.imdbID}`;
+    filmNode.innerHTML = `<img class='poster' src='${film.Poster}'/>
+                            <h3 class='title'>${film.Title}</h3>
+                            <h4 class='year'>(${film.Year})</h4>
+                            <p class='type'><b>type:</b> ${film.Type}</p>
+                            <i class="fav-button fas fa-heart">`;
+    outputNode.appendChild(filmNode);
+  });
+  let img = filmResults[0].Poster;
+  setBackgroundImgForDesktop(img);
+}
+
+//creates background img using the poster of the first film on the search result list
+function setBackgroundImgForDesktop(img) {
+  document.body.style.backgroundImage = `url("${img}")`;
+}
+
+//event listener on the search form and button
+document.querySelector("form").addEventListener("submit", e => {
+  e.preventDefault();
+  movieName = document.querySelector("#search").value;
+  document.querySelector(".films").innerHTML = "";
+  getMoviesByName(movieName);
+  document.querySelector("#search").value = "";
+
+  //event listener for fetching more results for the searched term;
+  document.querySelector(".load-next-page").addEventListener("click", e => {
+    getMoreMoviesByName(movieName);
+    setBackgroundImgForDesktop(img);
+  });
+});
+
+//fetches movie infomation by ID
+function getMovieByID(movieID) {
+  return fetch(`${urlBase}i=${movieID}`)
+    .then(function(response) {
+      return response.json();
+    })
+    .then(function(body) {
+      displayFilmDetails(body);
+    });
+}
+
+//creates and appends a div with additional informaion
+function displayFilmDetails(film) {
+  const parentNode = searchTarget;
+  parentNode.className += " active";
+  addInfoNode = document.createElement("div");
+  addInfoNode.className = "add-info";
+  addInfoNode.innerHTML = `
+        <p><b>imdb rating:</b> ${film.imdbRating}</p>
+        <p><b>cast:</b> ${film.Actors}</p>
+        <p><b>awards:</b> ${film.Awards}</p>
+        <p><b>director:</b> ${film.Director}</p>
+        <p><b>genre:</b> ${film.Genre}</p>
+        <p><b>plot:</b> ${film.Plot}</p>`;
+  parentNode.appendChild(addInfoNode);
+}
+
+//event listener on each film div
+outputNode.addEventListener("click", e => {
+  if (event.target.closest(".fav-button")) {
+    let favourite = event.target.closest(`.main__film`);
+    let secondFavourite = favourite.cloneNode(true);
+    secondFavourite = secondFavourite.firstChild;
+    posterNode.appendChild(secondFavourite);
+    event.target.closest(".fav-button").style.color = "red";
+
+    saveDiv();
+
+  } else if (event.target.closest(".main__film")) {
+    removeAdditionalInfo();
+    const film = event.target.closest(".main__film").dataset.imdbid;
+    searchTarget = event.target.closest(".main__film");
+    getMovieByID(film);
+  }
+});
+
+//removes additional info from the film div
+function removeAdditionalInfo() {
+  const filmDivs = document.querySelectorAll(".active");
+  filmDivs.forEach(filmDiv => {
+    let addInfoDiv = document.querySelectorAll(".add-info");
+    addInfoDiv.forEach(addInfo => {
+      let parentDiv = addInfo.parentNode;
+      parentDiv.removeChild(addInfo);
+    });
+  });
+}
+
+//Pagination - fetches the next page of movies from the API - search by names
+function getMoreMoviesByName(movieName) {
+  pageCounter++;
+  return fetch(`${urlBase}s=${movieName}&page=${pageCounter}`)
+    .then(function(response) {
+      return response.json();
+    })
+    .then(function(body) {
+      displayFilms(body.Search);
+    });
+}
+
+function saveDiv(){
+    let savedDiv = JSON.stringify(document.querySelector('.favourites__divs').innerHTML);
+    localStorage.setItem("favourites", savedDiv);
+
+}
+
+function recallDiv(){
+    if(localStorage.getItem("favourites") != null){
+        let recalledDiv = JSON.parse(localStorage.getItem("favourites"));
+        document.querySelector('.favourites__divs').innerHTML = recalledDiv;
+    }
+}
+
+recallDiv();
+
+document.querySelector('.clear-favourites').addEventListener('click', e=> {
+    document.querySelector('.favourites__divs').innerHTML="";
+    clearFavourites()
+});
+
+function clearFavourites(){
+localStorage.removeItem("favourites");
+}