Demo Version - includes sort & pagination

README.md

@@ -1,50 +1,48 @@
-# React Cinema
-
-Let's revisit our first project where we built a movie search engine using the Open Movie Database. This time we want to implement it using React. It should be a Single Page App, that is all the functionality should be on a single page, rather switch between multiple pages.
-
-Before starting draw a plan of your application. What are some of the components you are going to need? Which components will fetch data and how will that data be displayed? Which components should be re-used? Rather than re-implementing your previous solution again have a think about what you have learned in the past week and how you can apply it here.
+# React Cinema (aka Mission Impossible 2)
 
 ## The brief
 
-We want to create a movie search engine. To power it we will use the [Open Movie Database](http://www.omdbapi.com). It provides access to a huge database of films via an **API**, which stands for **Application Programming Interface**. In short, it is a set of rules and procedures you need to follow to use a remote system.
-
-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 create a movie search engine, completing as many of the following tasks, using our newly-aquired REACT skills
 
-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. You can use Bootstrap to help you
-
-- [ ] 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 for the returned results.
-- [ ] Make sure your design is responsive and looks great at different screen widths
-- [ ] Use JavaScript to capture the submit event on in your search form, extract the query string from your input and use that to make an API call to the Open Movie Database API to search for films which match the query string. Console.log the results
-- [ ] Display the data returned by the API including title, year and poster picture
-- [ ] 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. Console.log the returned result
-- [ ] Display the detailed movie result in the in the details view you created earlier
+## Checklist
+- [x] 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 for the returned results.
+- [x] Make sure your design is responsive and looks great at different screen widths
+- [x] Use JavaScript to capture the submit event on in your search form, extract the query string from your input and use that to make an API call to the Open Movie Database API to search for films which match the query string. Console.log the results
+- [x] Display the data returned by the API including title, year and poster picture
+- [x] Adjust your layout to create room for a detailed view of movie information
+- [x] Capture clicks on your movie results items and use that information to make another request to the API for detailed movie information. Console.log the returned result
+- [x] Display the detailed movie result in the in the details view you created earlier
 
 **Your own feature**
 
-- [ ] Implement any feature you would find useful or interesting. Include some info in the `README.md` about what it is.
+- [x] Click on 'Rating' radio button to sort from highest rated to lowest rated movie
+- [x] Click on 'Year' radio button to sort from newest to oldest movie
+- [x] Next page and previous page pagination included
 
 **Stretch goals**
+-     Ran out of time to attempt 'favourites' stretch goals but would like to include at a later date
+
+## Instructions
 
-- [ ] Let's create a search preview. It should listen for keydown 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 you have at least 3 characters typed. Also, you may want to implement a `debounce` function to put a small delay on the search. This will reduce the number of requests you send and may the functionality more efficient. You could write your own function if you want a challenge or use one from a library such as `lodash`
+- Open index.html in a browser
+- Enter the full or partial title of the movie you wish to search for (results will be loaded 10 at a time on a screen)
+- Click  >> next to search button to go to next page of results (page number will be displayed as well as back << button)
+- Click on Rating radio button to display movies sorted from highest to lowest rated according to IMDB score
+- Click on Year radio button to display movies sorted from newest to oldest released
+- Click on movie name to be taken to IMDB website for chosen film
+- Click on movie poster to retrieve more information about the movie and again to remove the additional information
 
-- [ ] 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.
+## Golden Globes ##
 
-- [ ] Make the favourites list sortable. Add up and down buttons to your favourites which on click will move the result in relevant in your list
+I am pleased with the layout of the website. I think there is a lot of content without being too cluttered or detracting from the posters. I am also happy that this version of the website is much more polished than the last attempt. My html and css skills have improved greatly since then, although it feels as though there was less javascript to write than the last. 
 
-- [ ] Save favourites locally using either `cookies` or `localStorage` so that favourites persist in browser after refresh
 
-## Objectives
+## Golden Raspberries ##
 
-* I want to see great looking webpages which work well at all screen widths
-* Your code should have consistent indentation and sensible naming
-* Use lots of concise 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
+- The sort feature was the last thing to be implemented and was rushed which is why the radio buttons are poorly positioned on the page and do not 'check' as expected. This is a definite bug that should be fixed. Each sort only works once. I suspect this to be down to the 'checking issue'. 
+- I have realised that if a film title is particularly short, it will wrap next to the film poster rather than beneath it.
+- If less than 10 films are displayed, the next button still appears, although an error message will be displayed if the user clicks it and the page will remain unchanged.
 
-## README.md
+## Conclusion ##
 
-When finished, include a README.md in your repo. This should explain what the project is, how to run it and how to use it. 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.
+Although this website is more dynamic and has more features than previous projects, it has a similar layout to the News Reader one so I will be looking to challenge myself and create a different style for my next website. It definitely represents progression though. 

cine_index.css

@@ -0,0 +1,206 @@
+* {
+  box-sizing: border-box;
+}
+
+html {
+  margin: auto;
+  font-family: Haettenschweiler, "Arial Narrow Bold", sans-serif;
+  background-color: #242033f1;
+  color: #f2faf2;
+  text-align: center; 
+}
+
+p{
+  margin:0px
+}
+
+.App__header{
+  display:flex;
+  flex-direction: row;
+  flex-wrap:wrap;
+
+  height:130px;
+  background:url(MRNmobile2.png);
+
+  background-repeat: no-repeat;
+  background-position: center;
+
+  text-align:center;
+}
+
+input {
+  width: 80%;
+  font-size:18px;
+  padding-left:20px;
+  background-color: #242033f1;
+  color:white;
+  border-radius: 4px;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+.search__form{
+  align-content: left;
+}
+
+.search__sort{
+  float:left;
+  margin-top:40px;
+}
+
+h3{
+  font-size:15px;
+}
+
+h2{
+  font-size: 15px;   
+}
+
+.results__body{
+  margin-top:10px;
+}
+
+.results__sort{
+  align-items:left;
+}
+
+article{
+  border:2px solid #fff;
+  border-radius: 4px;
+  background-color: #5f597596
+}
+
+.article__picture{
+  display:flex;
+  flex-direction:row;
+  flex-wrap:wrap;
+}
+
+#article__main{
+  display:flex;
+  flex-direction:row
+}
+
+.hidden__text{
+  margin-left:10px;
+  margin-right:10px;
+  font-size:12px;
+}
+
+/*thumnails for mobile*/
+img {
+  border: 2px solid #000;
+  border-radius: 4px;
+  padding: 5px;
+  margin-left:5px;
+  width: 150px;
+  height:auto;
+}
+
+.grow img{
+  transition: 1s ease;
+}
+
+.grow img:hover{
+  -webkit-transform: scale(1.2);
+  -ms-transform: scale(1.2);
+  transform: scale(1.2);
+  transition: 1s ease;
+}
+
+/*tablet view*/
+@media (min-width: 768px) {
+  .App__header{
+    background-color: hotpink;
+    height:175px;
+    background:url(MRNnarrow.png);
+    background-repeat: no-repeat;
+    background-position: center;
+    text-align:center;
+  }
+
+  p{
+    margin:0px;
+    font-size: 15px;
+    text-decoration: none;
+  }
+
+  .hidden__text{
+    margin-left:10px;
+    margin-right:10px;
+    font-size:18px;
+  }
+
+  input {
+    width: 60%;
+    font-size:28px;
+  }
+
+  button{
+    width: 10%;
+    height:38px ;
+    font-size:28px;
+    border-radius: 4px;
+  }
+}
+
+@media (min-width: 1400px) {
+
+  .App__header{
+    height:175px;
+    background:url(MRNnarrow.png);
+    background-repeat: no-repeat;
+    background-position: center;
+    text-align:center;
+  }
+
+  input {
+    width: 60%;
+    font-size:28px;
+  }
+
+  button{
+    width: 10%;
+    height:38px ;
+    font-size:28px;
+  }
+
+  .results__body{
+    display:flex; 
+    flex:10;
+    flex-direction:row;
+    flex-wrap:wrap;
+    justify-content: center;
+  }
+
+  article{
+  width:20%;
+  }
+  .article__picture{
+    flex: 2;
+    font-size:20px;
+    padding: 10px;
+  }
+
+  #article__main{
+    align-self: center;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  img {
+    max-width:100%;
+    padding: 5px;
+    width: auto;
+    height:300px;
+  }
+
+  .hidden__text{
+    margin-left:10px;
+  }
+}
+
+

index.html

@@ -1,12 +1,17 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="stylesheet" src="./style.css">
-    <title>Hello World</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script src="dist/bundle.js"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="stylesheet" href="./cine_index.css">
+  <title>Movies Right Now</title>
+  <link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Monoton|Permanent+Marker" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+</head>
+
+<body>
+  <div id="root"></div>
+  <script src="dist/bundle.js"></script>
+</body>
+
+</html>

movieDetail.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="stylesheet" href="./cine_index.css">
+  <title>Movie Detail</title>
+  <link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Monoton|Permanent+Marker" rel="stylesheet">
+</head>
+
+<body>
+
+  <script src="dist/bundle.js"></script>
+</body>
+
+</html>