accidentally closed the previous pull request

README.md

@@ -1,37 +1,19 @@
 # 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.
+This is a movie search engine and data is fetched from [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.
+There are two sets of html and js files; each is responsible for one page.
 
-To get started, fork and clone this repo. Please submit a pull request after your first commit and push commits regularly.
+The movie.html and movie.js are to create the movie search functionality. Within this page, the users can search for movies using key words, read expanded movie details, use pagination to switch between pages, and save movies to favorites. A preview window will appear once three or more letters are typed in the search box.
 
-You should complete as many of the following tasks as you can.
+The favorite.html and favorite.js are to save your favorite movies using local storage. The up and down buttons can be used to re-order them.
 
-- [ ] 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
+To switch between search and favorites, you can use the go to buttons at the top of the pages.
 
-**Movie details**
+Both pages are responsive to different screen widths using the same css style file.
 
-- [ ] 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
 
@@ -42,7 +24,3 @@ Hint: You may want to kick of the searching after at least 3 characters have bee
 * 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.

favorite.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title></title>
+
+  </head>
+  <body>
+    <h1>My Favorites</h1>
+    <!-- <form class="search-area">
+      <input type="text " class="search-area-text" placeholder="Search for a movie!">
+      <input type="button" class="search-area-submit" >
+    </form> -->
+
+    <ol class="favorite-list">
+    </ol>
+
+    <script src="favorite.js"></script>
+  </body>
+</html>

favorite.js

@@ -0,0 +1,83 @@
+const favoriteList = document.querySelector(".favorite-list");
+const localStorage = window.localStorage;
+const mySearchResults = document.createElement("button");
+const body=document.querySelector("body");
+let localData = JSON.parse(localStorage.getItem("favList"));
+
+mySearchResults.innerHTML = "Go to search results";
+body.insertBefore(mySearchResults, favoriteList);
+
+mySearchResults.addEventListener("click", function(event) {
+  event.preventDefault();
+  window.location.href = "movie.html";
+});
+
+
+function loadFavList(localData) {
+
+  favoriteList.innerHTML=" ";
+  localData.sort(function(a, b) {
+    return a.index - b.index;
+    })
+    .map(movie => {
+    let movieContainer = document.createElement("li");
+    movieContainer.className = "movie";
+    movieContainer.id = movie.id;
+    movieContainer.value = movie.index;
+
+    // console.log(movie.index)
+    // console.log(movie.title)
+    // console.log(movieContainer.value)
+
+    let movieTitle = document.createElement("h2");
+    let movieYear = document.createElement("h3");
+    let posterImage = document.createElement("img");
+    let upVote=document.createElement("button");
+    let downVote=document.createElement("button");
+
+    movieTitle.innerHTML = `${movie.title}`;
+    movieTitle.className = "movie-title";
+    movieContainer.appendChild(movieTitle);
+
+    movieYear.innerHTML = `${movie.year}`;
+    movieYear.className = "movie-year";
+    movieContainer.appendChild(movieYear);
+
+    posterImage.src = `${movie.image}`;
+    posterImage.className = "movie-image";
+    posterImage.alt = "Movie poster";
+    movieContainer.appendChild(posterImage);
+
+    upVote.innerHTML="Up"
+    movieContainer.appendChild(upVote);
+
+    downVote.innerHTML="Down"
+    movieContainer.appendChild(downVote);
+
+    upVote.addEventListener("click", function(event) {
+      event.preventDefault();
+      localData=shift(event,1);
+      loadFavList(localData);
+    });
+    downVote.addEventListener("click", function(event) {
+      event.preventDefault();
+      localData=shift(event,-1);
+      loadFavList(localData);
+      //function;
+    });
+
+    favoriteList.appendChild(movieContainer);
+    return localData;
+
+  });
+}
+
+loadFavList(localData);
+
+function shift(event,number){
+  const currentIndex= event.target.parentNode.getAttribute("value");
+  localData[parseInt(currentIndex)-number].index=currentIndex;
+  localData[currentIndex].index=parseInt(currentIndex)-number;
+  localStorage.setItem("favList", JSON.stringify(localData));
+  return localData
+}

movie.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title></title>
+
+  </head>
+  <body>
+    <h1>Movie Collectors</h1>
+    <form class="search-area">
+      <input type="text " class="search-area-text" placeholder="Search for a movie!">
+      <input type="button" class="search-area-submit" >
+    </form>
+    <ul class="preview">
+    </ul>
+
+    <div class="pagination">
+    </div>
+
+    <ul class="search-result-list">
+    </ul>
+
+    <script src="movie.js"></script>
+  </body>
+</html>