Quite a challenge!

README.md

@@ -1,48 +1,80 @@
 # 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.
+> # A movie search engine powered by the [Open Movie Database](http://www.omdbapi.com) API.
+>
+> ## _”A mobile-first, responsive design that looks great at different screen widths“_
 
-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.
+## UX
 
-- [ ] 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
+- Type in your search query and hit the button.
 
-**Movie details**
+![image](https://user-images.githubusercontent.com/42837452/45933010-84862080-bf7d-11e8-8881-aa7b004c2dcf.png)
 
-- [ ] 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
+- Search results are loaded below and the screen scrolls up automatically.
 
-**Your own feature**
+- Load more search results by paging through. You get 10 results at a time.
 
-- [ ] Implement any feature you would find useful or interesting
+![image](https://user-images.githubusercontent.com/42837452/45933027-9e276800-bf7d-11e8-80c0-974186b510bc.png)
 
-**Stretch goals**
+- Just tap on any of the films in the search results to see more information. This loads below the search results and the screen scrolls up automatically.
 
-- [ ] 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.
+![image](https://user-images.githubusercontent.com/42837452/45933033-b303fb80-bf7d-11e8-8ec7-90c321be83a9.png)
 
-## Objectives
+- Save your favourite films - just click the button on the film detail view.
 
-* 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.
+![image](https://user-images.githubusercontent.com/42837452/45933039-c57e3500-bf7d-11e8-825b-aca38431774d.png)
 
-## README.md
+- You can see your list of favourites by clicking the account button in the header. You can delete films from the list individually or delete them all with a single click.
 
-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.
+![image](https://user-images.githubusercontent.com/42837452/45933045-daf35f00-bf7d-11e8-9e85-395d30f62476.png)
+
+## Technology used
+
+- **HTML & CSS** (Flexbox, Grid)
+  - BEM methodology used in markup and CSS.
+  - Individual media queries for tablet and desktop in separate files to make the styles easier to maintain.
+- **JavaScript** (Fetch, OMDB API, localStorage)
+  - Functions are pure as much as possible – concise reusable and each with with a clear purpose.
+  - Well commented throughout.
+
+## Surprise feature
+
+- If the film you‘re looking for doesn't have a poster then look out for the ’Fill Ferrell‘ placeholder image.
+
+![image](https://user-images.githubusercontent.com/42837452/45933051-f52d3d00-bf7d-11e8-8c59-8465ca813676.png)
+
+---
+
+## Challenges, learnings and TODOs
+
+- **localStorage**
+
+  - Favourites currently stored individually in localStorage.
+  - Working with a database that stores strings of information is challenging.
+  - TODO: Need to refactor to store a single object in localStorage. On page load this can be retrieved and parsed. Stored in an object the user favourites can then be manipulated and updated. On any interaction even the object can be stringified before re-setting in localStorage.
+  - [ ] TODO: Make the favourites list sortable. Add `up` and `down` buttons to your favourites which on click will move the result in relevant direction. Also sortable by date saved and film title.
+  - [ ] TODO: Implement a watch list feature to save films that you want to see as well as favourites.
+
+- **Search**
+
+  - [ ] TODO: 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. Kick of the searching after at least 3 characters have been typed.
+
+- **Refactoring**
+
+  - [ ] TODO: Refactor code to make use of export/import to keep JS easy to navigate and maintain.
+
+---
+
+### The original brief
+
+- 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 in your markup and CSS 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.

index.html

@@ -0,0 +1,46 @@
+<!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>The Reel Thing - Find Your Favourite Films</title>
+    <link rel="stylesheet" href="./src/modern-normalize.css">
+    <link href="https://fonts.googleapis.com/css?family=Bungee+Inline|Dosis:300,600" rel="stylesheet">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
+        crossorigin="anonymous">
+    <link rel="stylesheet" href="./src/style.css">
+    <link rel="stylesheet" href="./src/tablet-style.css">
+    <link rel="stylesheet" href="./src/desktop-style.css">
+</head>
+
+<body>
+    <div id="app">
+        <header>
+            <h1 id="title">The Reel Thing</h1>
+            <button class="btn btn__account"><i class="fas fa-user-circle"></i></button>
+        </header>
+        </form>
+        <section id="account">
+            <div id="favourites">
+                <h3 id="favourites__title">Your favourites <button class='btn btn__favourite__remove'>Delete
+                        all</button></h3>
+                <ul id="favourites__list"></ul>
+            </div>
+        </section>
+        <form id="search" class>
+            <label class="search__label" for="search-tf">What are you looking for?</label>
+            <input class="search__input" id="search-tf" name="query" type="text" placeholder="Search for a film title..."
+                autofocus>
+            <button class="btn search__btn"><i class="fas fa-search"></i></button>
+        </form>
+
+        <section id="search-results"></section>
+
+        <section id="film-details"></section>
+    </div>
+    <script src="./src/index.js" type="module"></script>
+</body>
+
+</html>

src/data.json

@@ -0,0 +1,93 @@
+HTTP/1.1 200 OK
+Date: Sun, 23 Sep 2018 07:24:17 GMT
+Content-Type: application/json; charset=utf-8
+Transfer-Encoding: chunked
+Connection: keep-alive
+Cache-Control: public, max-age=86400
+Expires: Mon, 24 Sep 2018 07:24:17 GMT
+Last-Modified: Sat, 22 Sep 2018 15:18:36 GMT
+Vary: *, Accept-Encoding
+X-AspNet-Version: 4.0.30319
+X-Powered-By: ASP.NET
+Access-Control-Allow-Origin: *
+CF-Cache-Status: HIT
+Server: cloudflare
+CF-RAY: 45eb4552917f0a7e-LHR
+Content-Encoding: gzip
+
+{
+  "Search": [
+    {
+      "Title": "Titanic",
+      "Year": "1997",
+      "imdbID": "tt0120338",
+      "Type": "movie",
+      "Poster": "https://m.media-amazon.com/images/M/MV5BMDdmZGU3NDQtY2E5My00ZTliLWIzOTUtMTY4ZGI1YjdiNjk3XkEyXkFqcGdeQXVyNTA4NzY1MzY@._V1_SX300.jpg"
+    },
+    {
+      "Title": "Titanic II",
+      "Year": "2010",
+      "imdbID": "tt1640571",
+      "Type": "movie",
+      "Poster": "https://m.media-amazon.com/images/M/MV5BMTMxMjQ1MjA5Ml5BMl5BanBnXkFtZTcwNjIzNjg1Mw@@._V1_SX300.jpg"
+    },
+    {
+      "Title": "Titanic: The Legend Goes On...",
+      "Year": "2000",
+      "imdbID": "tt0330994",
+      "Type": "movie",
+      "Poster": "https://ia.media-imdb.com/images/M/MV5BMTg5MjcxODAwMV5BMl5BanBnXkFtZTcwMTk4OTMwMg@@._V1_SX300.jpg"
+    },
+    {
+      "Title": "Titanic",
+      "Year": "1953",
+      "imdbID": "tt0046435",
+      "Type": "movie",
+      "Poster": "https://m.media-amazon.com/images/M/MV5BMTU3NTUyMTc3Nl5BMl5BanBnXkFtZTgwOTA2MDE3MTE@._V1_SX300.jpg"
+    },
+    {
+      "Title": "Titanic",
+      "Year": "1996",
+      "imdbID": "tt0115392",
+      "Type": "series",
+      "Poster": "https://m.media-amazon.com/images/M/MV5BMTIyNjc0NjgyMl5BMl5BanBnXkFtZTcwMDAzMTAzMQ@@._V1_SX300.jpg"
+    },
+    {
+      "Title": "Raise the Titanic",
+      "Year": "1980",
+      "imdbID": "tt0081400",
+      "Type": "movie",
+      "Poster": "https://m.media-amazon.com/images/M/MV5BM2MyZWYzOTQtMTYzNC00OWIyLWE2NWItMzMwODA0OGQ2ZTRkXkEyXkFqcGdeQXVyMjI4MjA5MzA@._V1_SX300.jpg"
+    },
+    {
+      "Title": "The Legend of the Titanic",
+      "Year": "1999",
+      "imdbID": "tt1623780",
+      "Type": "movie",
+      "Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMjMxNDU5MTk1MV5BMl5BanBnXkFtZTgwMDk5NDUyMTE@._V1_SX300.jpg"
+    },
+    {
+      "Title": "Titanic",
+      "Year": "2012–",
+      "imdbID": "tt1869152",
+      "Type": "series",
+      "Poster": "https://m.media-amazon.com/images/M/MV5BMTcxNzYxOTAwMF5BMl5BanBnXkFtZTcwNzU3Mjc2Nw@@._V1_SX300.jpg"
+    },
+    {
+      "Title": "Titanic: Blood and Steel",
+      "Year": "2012–",
+      "imdbID": "tt1695366",
+      "Type": "series",
+      "Poster": "https://m.media-amazon.com/images/M/MV5BMjI2MzU2NzEzN15BMl5BanBnXkFtZTcwMzI5NTU3Nw@@._V1_SX300.jpg"
+    },
+    {
+      "Title": "In Search of the Titanic",
+      "Year": "2004",
+      "imdbID": "tt1719665",
+      "Type": "movie",
+      "Poster": "https://ia.media-imdb.com/images/M/MV5BMTAzNjY0NDA2NzdeQTJeQWpwZ15BbWU4MDIwMzc1MzEx._V1_SX300.jpg"
+    }
+  ],
+  "totalResults": "190",
+  "Response": "True"
+}