Project Cinema PR

README.md

@@ -1,50 +1,16 @@
----
-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). 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.
-
-> Check out this video for some background info on APIs  
-> [https://www.youtube.com/watch?v=s7wmiS2mSXY](https://www.youtube.com/watch?v=s7wmiS2mSXY)
-
-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 the repo at [https://github.com/dmitrigrabov/project-cinema](https://github.com/dmitrigrabov/project-cinema). 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.
-
-- [ ] 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.
-- [ ] Use JavaScript to capture the submit `event` 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 using `fetch`. `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
-
-**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
-- [ ] Make your design responsive and ensure it looks great at different screen widths
-- [ ] 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
+Welcome to Project Cinema! You can use this to search for information about
+your favourite movies.
 
-* We want to see great looking webpages
-* 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. For example not break if server fails to return expected results
+## Search for your favourite film
+In the search bar at the top of the page, type in your search term and
+hit search. Project Cinema will search the Online Movie Database for the top 10
+results and show you them along with the year it was released and the poster.
 
-## README.md
+## More information
+Click on the title of the film and we will show you the plot of the film below
+the poster.
 
-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.
+If you click on the poster, we will take you to the IMDB page so you can get
+some more information about the film.

index.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<head>
+  <meta charset="utf-8">
+  <title>Project Cinema</title>
+  <link rel="stylesheet" type="text/css" href="styles.css">
+
+</head>
+
+<body>
+  <div class="searchBar">
+
+    <h1>Movie Database Search</h2>
+
+    <form id="form">
+      <textarea class="searchTerm" placeholder="What movie are you looking for?" name="textarea"></textarea>
+      <button class="searchButton">Search</button>
+    </form>
+
+  </div>
+
+  <div class="results">
+    <h1>What will you find?</h1>
+    <div class="plotInfo">
+
+    </div>
+  </div>
+
+<script src="src/index.js"></script>
+
+</body>
+
+</html>

src/index.js

@@ -0,0 +1,76 @@
+function submitHandler(event){
+  event.preventDefault();
+
+  // Capture search term
+  const getMovie = document.querySelector(".searchTerm");
+  const movieToSearch = getMovie.value;
+
+  // Search the api using movieToSearch
+  const url = `http://www.omdbapi.com/?s=${movieToSearch}&apikey=a46e4310`;
+  fetch(url)
+    .then(function(response){
+      return response.json();
+    }).then(function(data){
+
+      // Add that information to the web page.
+      const results = data.Search.map(movie =>
+          `<div class="movieCard">
+              <button class="titleButton">${movie.Title}</button>
+              <p>${movie.Year}</p>
+              <a href="https://www.imdb.com/title/${movie.imdbID}" target="_blank"><img src=${movie.Poster}></a>
+              <div class="${movie.imdbID}"></div>
+          </div>
+          `
+      ).join('');
+      getMovie.value = "";
+
+      const resultsEl = document.querySelector(".results");
+
+      resultsEl.innerHTML = results;
+
+
+            // Get more information
+            function clickHandler(event){
+
+              // Capture movie title
+              if (event.target && event.target.matches("button.titleButton")){
+                const movieName = event.target.textContent;
+
+                const newUrl = `http://www.omdbapi.com/?t=${movieName}&apikey=a46e4310`;
+                fetch(newUrl)
+                .then(function(response) {
+                  return response.json();
+                }).then(function(data) {
+                  const plotToAdd = `
+                    <p style="text-align: center; margin: 0 25% 2% 25%;">${data.Plot}</p>
+                  `;
+                  const cardEl = document.querySelector(`.${data.imdbID}`);
+                  cardEl.innerHTML = plotToAdd;
+
+                }).catch(function(error) {
+                  // If this fails, do this
+
+                });
+              }
+            };
+
+            const getMoreInfo = document.querySelector(".results");
+
+            getMoreInfo.addEventListener("click", clickHandler);
+
+    }).catch(function(error){
+      const failState = `
+        <div class="noResult">
+          <h2>Sorry, that's not in the database.</h2>
+          <a href="https://www.youtube.com/watch?v=15HTd4Um1m4" target="_blank"><img src="assets/brokencinema.jpg"></a>
+        </div>
+      `;
+
+      const el = document.querySelector(".results");
+      return el.innerHTML = failState;
+    });
+}
+
+const getSubmit = document.querySelector("#form");
+
+getSubmit.addEventListener("submit", submitHandler);

styles.css

@@ -0,0 +1,70 @@
+body{
+  margin: 0;
+  font-family: Tahoma;
+}
+
+.searchBar{
+  margin: 0;
+  background-color: #CCC;
+  text-align: center;
+  overflow: auto;
+}
+
+.searchTerm{
+  width: 600px;
+	height: 80px;
+	border: 3px solid #8c8c8c;
+  font-size: 30px;
+	padding: 5px;
+}
+
+form{
+  display: flex;
+  justify-content: space-around;
+  padding: 10px;
+}
+
+.searchButton{
+  width: 160px;
+  border: 3px solid #8c8c8c;
+  font-size: 30px;
+	padding: 5px;
+}
+
+.results{
+  margin: 0;
+  background-color: skyBlue;
+  min-height: 400px;
+  text-align: center;
+  overflow: auto;
+}
+
+.movieCard{
+  text-align: center;
+  border: 2px solid #000;
+}
+
+.movieCard:nth-child(even){
+  background-color: lightBlue;
+}
+
+.titleButton{
+  width: auto;
+  border: none;
+  background-color: aliceblue;
+  font-size: 30px;
+  margin: 10px;
+  padding: 5px;
+  border-radius: 25%;
+}
+
+.noResult{
+  text-align: center;
+  border: 2px solid #000;
+}
+
+img{
+  max-width: auto;
+  margin: 10px;
+  cursor: pointer;
+}