diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..d2ea995d Binary files /dev/null and b/.DS_Store differ diff --git a/.~lock.dvdlist.xls# b/.~lock.dvdlist.xls# new file mode 100644 index 00000000..556cad24 --- /dev/null +++ b/.~lock.dvdlist.xls# @@ -0,0 +1 @@ +Roland Levy,rolandjlevy,Rolands-MacBook-Pro.local,21.09.2018 10:07,file:///Users/rolandjlevy/Library/Application%20Support/OpenOffice/4; \ No newline at end of file diff --git a/README-notes.md b/README-notes.md new file mode 100644 index 00000000..2a84d1b6 --- /dev/null +++ b/README-notes.md @@ -0,0 +1,22 @@ + +# README.md instructions + +- Include a screenshot +- Outine a summary of the objective +- Explain functionality +- List technologies used +- Mention features +- Mention any outstanding issues +- Mention features you would include if you had more time + +-------------------- + +# Markdown +## Title +**Bold** +- [Link](www.url.com) +- ![Screenshot](images/screen-shot.png) +* List item +- [ ] Boxy list item +> Blockquote +--- horizonatal rule diff --git a/README.md b/README.md index c08139f4..46491b0b 100644 --- a/README.md +++ b/README.md @@ -1,54 +1,46 @@ +# 'FLIXPLORER' movie search engine --- -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. +![Screenshot](assets/screen-shot-mobile.png) +![Screenshot](assets/screen-shot-desktop.png) + +## Objective > what does it do? +**FLIXPLORER** is a movie search engine app. Its purpose is to display results of a search query efficiently and give the user full details of movies shown in the results. It has a responsive layout for mobile and desktop screen sizes giving an intuative and user-freindly experience. + +## Functionality > How does it work? ++ The app first captures the search input and fetches data that matches the input from the [Open Movie Database](http://www.omdbapi.com) API. ++ The app then uses Javascript and CSS to display the data returned by the API as pages of links, with 10 links per page. ++ Each link has a unique ID which is used to identify the selected movie from the API. ++ Each time a movie is selected, the title, poster image, description and other details are displayed + +> [View FLIXPLORER repo on Github](https://github.com/rolandjlevy/project-cinema) + +## Technology used ++ Open Movie Database API ++ Javascript ++ CSS + +## Stages of development ++ Set up API and read the **Open Movie Database API** documentation ++ Created functionality for the initial search query ++ Created smart pagination, with scrolling to see all results ++ Retrieved the data for selected movie ++ Used Javascript to display the poster image, year, IMDB rating, director, description etc... ++ Used CSS to style the UI + +## Features ++ Responsive search preview - results update with each letter typed. Initial search results are shown below the search box ++ Smart pagination allows users to quickly navigate all pages of search results ++ Form validation gives the user feedback and details of results: +> + if the search input is more than 3 letters +> + if the search input has returned a valid result or not +> + How many results and pages of results found + +## Problems and errors to be fixed ++ Fix errors with the search input field. Searching more than one word creates errors with the results. ++ Improve the tablet and desktop views for better responsiveness + +## Desired features with more time ++ Include infinate scrolling with the initial results ++ Use the [Youtube API](https://developers.google.com/youtube/v3/) to load a trailer into the detailed results area ++ Display a relevant poster when no image was available from the **Open Movie Database** ++ Create a sortable favourites list and display it on the page diff --git a/assets/.DS_Store b/assets/.DS_Store new file mode 100644 index 00000000..5008ddfc Binary files /dev/null and b/assets/.DS_Store differ diff --git a/assets/Adobe-Logo.png b/assets/Adobe-Logo.png new file mode 100644 index 00000000..546c7df6 Binary files /dev/null and b/assets/Adobe-Logo.png differ diff --git a/assets/Adobe-Logo_edited-1.png b/assets/Adobe-Logo_edited-1.png new file mode 100644 index 00000000..1d6ed2ed Binary files /dev/null and b/assets/Adobe-Logo_edited-1.png differ diff --git a/assets/avocado.jpg b/assets/avocado.jpg new file mode 100644 index 00000000..49527a35 Binary files /dev/null and b/assets/avocado.jpg differ diff --git a/assets/box-to-front.html b/assets/box-to-front.html new file mode 100644 index 00000000..df76fea9 --- /dev/null +++ b/assets/box-to-front.html @@ -0,0 +1,70 @@ + + + + + + +
+



+ See more +
+
+ × +
+
+
+ + \ No newline at end of file diff --git a/assets/idea-for-styling.png b/assets/idea-for-styling.png new file mode 100644 index 00000000..2656a891 Binary files /dev/null and b/assets/idea-for-styling.png differ diff --git a/assets/properties.txt b/assets/properties.txt new file mode 100644 index 00000000..e863ba85 --- /dev/null +++ b/assets/properties.txt @@ -0,0 +1,25 @@ +Title: "Jaws", +Year: "1975", +Rated: "PG", +Released: "20 Jun 1975", +Runtime: "124 min", +Genre: "Adventure, Drama, Thriller", +Director: "Steven Spielberg", +Writer: "Peter Benchley (screenplay), Carl Gottlieb (screenplay), Peter Benchley (based on the novel by)", +Actors: "Roy Scheider, Robert Shaw, Richard Dreyfuss, Lorraine Gary", +Plot: "A local sheriff, a marine biologist and an old seafarer team up to hunt down a great white shark wreaking havoc in a beach resort.", +Language: "English", +Country: "USA", +Awards: "Won 3 Oscars. Another 11 wins & 18 nominations.", +Poster: "https://m.media-amazon.com/images/M/MV5BMmVmODY1MzEtYTMwZC00MzNhLWFkNDMtZjAwM2EwODUxZTA5XkEyXkFqcGdeQXVyNTAyODkwOQ@@._V1_SX300.jpg", +Ratings: [], +Metascore: "87", +imdbRating: "8.0", +imdbVotes: "489,473", +imdbID: "tt0073195", +Type: "movie", +DVD: "11 Jul 2000", +BoxOffice: "N/A", +Production: "Universal Pictures", +Website: "http://www.jaws25.com/", +Response: "True" \ No newline at end of file diff --git a/assets/screen-shot-desktop.afphoto b/assets/screen-shot-desktop.afphoto new file mode 100644 index 00000000..40eddb9f Binary files /dev/null and b/assets/screen-shot-desktop.afphoto differ diff --git a/assets/screen-shot-desktop.png b/assets/screen-shot-desktop.png new file mode 100644 index 00000000..39bb8dc8 Binary files /dev/null and b/assets/screen-shot-desktop.png differ diff --git a/assets/screen-shot-mobile.afphoto b/assets/screen-shot-mobile.afphoto new file mode 100644 index 00000000..19a775fb Binary files /dev/null and b/assets/screen-shot-mobile.afphoto differ diff --git a/assets/screen-shot-mobile.png b/assets/screen-shot-mobile.png new file mode 100644 index 00000000..16063ef2 Binary files /dev/null and b/assets/screen-shot-mobile.png differ diff --git a/assets/template-ipad-view.html b/assets/template-ipad-view.html new file mode 100644 index 00000000..d4b04d5c --- /dev/null +++ b/assets/template-ipad-view.html @@ -0,0 +1,95 @@ + +
+
+

+
  • FLIX
    • +
  • PLORER
    • +

    +
    +
    +
    +
    + +
    +
    Mad Mutilator, 1983
    These Sorcerers Are Mad, 1978
    Mad Love, 2015
    I'm Mad, 1994
    Mad Youth, 1940
    Mad Bad, 2007
    Mad Mad House, 2004–
    Mad Enough to Kill, 1975
    Mad Little Island, 1958
    Mad Ship, 2013
    +
    +
    751 results for "mad"
    +
    , page 10 of 76
    +
    +
     1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17  18  19  20  21  22  23  24  25  26  27  28  29  30  31  32  33  34  35  36  37  38  39  40  41  42  43  44  45  46  47  48  49  50  51  52  53  54  55  56  57  58  59  60  61  62  63  64  65  66  67  68  69  70  71  72  73  74  75  76 
    +
    +

    About
    FLIXPLORER

    + Flixplorer has been leading the way for digital content since September 2018. + It is the world's leading internet entertainment service with 130 million memberships in over 190 countries enjoying TV series, documentaries and feature films across a wide variety of genres and languages. + Members can watch as much as they want, anytime, anywhere, on any internet-connected screen. + Members can play, pause and resume watching, all without commercials or commitments. +
    +
    +
    + + + + + +
    +
    +
    + +
    Mad Love 2015
    +     +
    +
    +
    + +
    +
    +
      +
    • Year: 2015
      • +
    • Released: 16 Sep 2015
      • +
    • Runtime: 107 min
      • +
    • Genre: Drama, Romance
      • +
    • Director: Philippe Ramos
      • +
    • Writer: Philippe Ramos (dialogue), Philippe Ramos (screenplay)
      • +
    • Actors: Melvil Poupaud, Dominique Blanc, Diane Rouxel, Lise Lamétrie
      • +
    +
    +
    +
    +
    +

    Plot

    1959. Guilty of a double-murder, a man is beheaded. At the bottom of the basket that just welcomed it, the head of the dead man tells his story: everything was going so well. Admired priest... +
    More details on IMDB
    +
    +
      +
    • Language: French
      • +
    • Country: France
      • +
    • Awards: 1 win.
      • +
    • Ratings: [object Object]
      • +
    • imdbRating: 7.1
      • +
    • imdbVotes: 142
      • +
    • imdbID: tt4019142
      • +
    • Type: movie
      • +
    • Visit website
      • +
    +
    +
    +
    + + + + + +
    +

    About
    FLIXPLORER

    + Flixplorer has been leading the way for digital content since September 2018. + It is the world's leading internet entertainment service with 130 million memberships in over 190 countries enjoying TV series, documentaries and feature films across a wide variety of genres and languages. + Members can watch as much as they want, anytime, anywhere, on any internet-connected screen. + Members can play, pause and resume watching, all without commercials or commitments. +
    +
    + +
    +