Projected completed

README.md

@@ -1,48 +1,57 @@
 # 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.
+![alt text](images\READMEIMG\landing-no-faves.jpg "landing page") ![alt text](images\READMEIMG\movie-display.jpg)
 
-To get started, fork and clone this repo. Please submit a pull request after your first commit and push commits regularly.
+## About
 
-You should complete as many of the following tasks as you can.
+This project involved building a movie search engine using the OMDB api.
 
-- [ ] 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**
+I believe I achieved the principal goals of the project. You can search for films, have results displayed and select one of these results for further information.
 
-- [ ] 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
+As an additional feature I used previous experience of working with newsAPI to also display recent news items about the film. This however is still quite buggy, and can show unrelated results often.
 
-**Your own feature**
+I have included a means of adding favourites via local storage.
 
-- [ ] Implement any feature you would find useful or interesting
+I missed the stretch goals of:
+* having pagination on search results
+* being able to reorder favourites
+* having a search preview
 
-**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.
+## Known issues
 
-## README.md
+#### Code Organisation
 
-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.
+The code is very messy, I had hoped to refactor but did not have time. I believe many of the API url functions (getMovieURL, getNewsURL) could fairly easily be condensed into one function. I could define functions for event handlers.
+
+There are very few pure functions here. I have attempted BEM in places for CSS, but have got confused at points when one block starts and another ends. I have also not used toggle function to switch between "active" and hidden elements.
+
+#### Responsive design
+
+I tend to spend too much time tweaking for mobile, and continually neglect desktop and other view widths. As a result, tablet has no dedicated media query, and desktop is sparse and poorly put together.
+
+#### Excess elements in HTML
+
+There will sometimes be seemingly useless divs injected into the html due to how I've appended elements.
+
+#### Unrelated news results
+
+This is likely always to be an issue for some films, currently it searches for the film title in all sources. This causes issues with films with fairly ordinary names (i.e Taxi Driver). I believe it could be fixed with some tweaking, to search for other parameters (director/writer) in these cases. Also limiting the sources that newsAPI searches to Entertainment publications.
+
+## Further Plans
+
+#### Further news functionality
+
+Due to the favourite functionality, I was hoping to keep track of news stories. This would mean that the main page favourites display would have icons representing the amount of new news stories related to a film since that film's page was last visited.
+
+I feel this could be achieved with the newsAPI and saving dates of visits saved to local storage. Along with set intervals for news refreshes, I think this would be quite an interesting feature. Unfortunately I was constrained by time and would want to refactor the code before attempting this.
+
+#### Missed stretch goals
+
+I believe these are all achievable. Though the search preview would take a little more work, as I attempted a modal menu for search options which inadvertently disables the search bar.
+
+I made a start on ordering favourites, but quirks of css caused the buttons to display when they shouldn't be, so I abandoned the feature to focus on removing bugs.

index.html

@@ -0,0 +1,51 @@
+<!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">
+  <link rel="stylesheet" type="text/css" href="styles.css">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
+  <link href="https://fonts.googleapis.com/css?family=Archivo+Narrow|Assistant:800|Six+Caps" rel="stylesheet">
+  <title>Project Cinema</title>
+</head>
+<body>
+  <header>
+    <nav>
+      <div class="nav__home">
+        <h2 class="logo">PROJECT CINEMA</h2>
+        <i class="fas fa-search search__display-bar"></i>
+      </div>
+<div class="nav__search">
+    <form class="search">
+      <input type="text" class="search__text" placeholder="Search.."/>
+      <button type="submit" class="search__submit"><i class="fas fa-search"></i></button>
+    </form>
+</div>
+    </nav>
+  </header>
+  <main>
+    <div class="landing-page">
+      <i class="fas fa-film landing-icon"></i>
+      <h3 class="landing-text">WELCOME TO PROJECT CINEMA</h3>
+      <div class="favourites-container">
+      </div>
+    </div>
+    <div class="modal">
+
+
+
+      <div class="results modal__content">
+
+
+      </div>
+    </div>
+    <div class="film-container">
+
+    </div>
+
+  </main>
+
+<script src=".\scripts\scripts.js"></script>
+</body>
+</html>