diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 00000000..523b81ca
Binary files /dev/null and b/.DS_Store differ
diff --git a/README.md b/README.md
index c08139f4..2ab5bacd 100644
--- a/README.md
+++ b/README.md
@@ -1,54 +1,46 @@
---
path: "/project-cinema"
-date: "2018-05-28"
+date: "2018-09-24"
title: "Project cinema"
---
-# Project Cinema
+# Movie Quest
-We want to create a movie search engine. To power it we will use the [Open Movie Database](http://www.omdbapi.com) API.
+The aim of this project, titled "Movie Quest", is to create a search application for users to be able to find films that they like or are interested in viewing, and to show them relevent information about said film. Movie Quest has been designed to fit the mobile phone screen primarily, but has also been designed to react responsively to the size of the user's device, making it also appropriate for tablet or desktop.
-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.
+**Design Objectives**
-To get started, fork and clone this repo. Please submit a pull request after your first commit and push commits regularly.
+With this project I endevoured to keep all JavaScript to be function-oriented, using many short, concise functions to carry out specific processes, which are then used as callback functions within other functions. I also tried to make sure that each function involved as little mutation as possible in order prevent problems with source information.
-You should complete as many of the following tasks as you can.
+In terms of UI design, this was the first project in which I tried to use CSS Grid to form page layout. While I did find this easier to impliment, I feel my inexperience with Grid lead to a slightly boxy and less sleek layout, although the page is still fully responseive.
-- [ ] 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
+**API**
-**Movie details**
+The project utilizes the [Open Movie Database](http://www.omdbapi.com) to fetch relvent data on a search term that the user inputs into the search function. On page load, the application retrieves information about films from the Star Wars franchise that were released in 2018. From there, the user can use the search feature to look for films.
-- [ ] 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
+**Film Description**
-**Your own feature**
+If the user wants to find out more information about a film they see, they can click on the "More info" button. This button makes a seperate call to the API to retrieve more detailed information about each film, using the film's IMDB id that is displayed in the ID attribute of each search result. If the API recieves a fetch request that specifies a film by ID, it returns specific information about that film only.
-- [ ] Implement any feature you would find useful or interesting
+**Pagination**
-**Stretch goals**
+Once the user searches for a film, the application will display page numbers at the bottom so that the user can look through multiple pages of enteries. The function that creates these pages will look at how many results have been returned by the API, divide that number by how many entries there are by page, and dynamically generate page buttons accordingly.
-- [ ] 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.
+**Favourites Feature**
-## Objectives
+If a user finds a film that they like or would want to see, they can then add that film to their favourites list. The application adds a button to each search result which, when clicked, will take the name of the film that the button belongs to and store it in a seperate area on the page.
-* 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
+**Future Goals And Ideas To Be Implimented**
-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.
+In order to make continual improvements to Movie Quest, I would like to impliment these changes in the future:
+
+- Limit the viewable amount of page buttons for each search in order to clean up the bottom of the application.
+
+- Have favourite be savable so that they remain after a page refresh.
+
+- Have favourites be rankable so that the user can be placed in preference order.
+
+- Impliment functionality so that movie information can be displayed or hidden at the user's request, without having to make seperate API calls for each entry.
+
+- Add a "Popular Films" feature that will provide search results for predetermened search terms based on popular films or film series.
\ No newline at end of file
diff --git a/images/.DS_Store b/images/.DS_Store
new file mode 100644
index 00000000..0161c1f2
Binary files /dev/null and b/images/.DS_Store differ
diff --git a/images/moviequestlogo.png b/images/moviequestlogo.png
new file mode 100644
index 00000000..6ff05b5d
Binary files /dev/null and b/images/moviequestlogo.png differ
diff --git a/images/noimage.png b/images/noimage.png
new file mode 100644
index 00000000..73cc6df9
Binary files /dev/null and b/images/noimage.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..b5ea8ab3
--- /dev/null
+++ b/index.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+ Movie Quest
+
+
+
+
+
+
+
+
+
+
+
+
Favourites:
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/brief.md b/src/brief.md
new file mode 100644
index 00000000..e51906ff
--- /dev/null
+++ b/src/brief.md
@@ -0,0 +1,54 @@
+---
+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.
+
+- [x] Work using mobile first, that is create the mobile version first and add tablet and desktop versions after.
+- [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 element for the returned results.
+- [x] 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
+- [x] Display the data returned by the API including title, year and poster picture
+
+**Movie details**
+
+- [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. Using event delegation will help you here. `console.log` the returned result
+- [x] Display the detailed movie result in the in the details view you created earlier
+- [x] 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**
+
+- [x] Implement pagination so that users can navigate between all movies in search results rather than just the first ten
+- [x] 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.
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 00000000..eb7858f1
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,230 @@
+//e2c4cd31 API Key
+const apiKey = "e2c4cd31";
+
+//Global HTML references
+const resultsContainer = document.querySelector(".results__container")
+const searchForm = document.querySelector(".search__form");
+const searchBox = document.querySelector(".search__box");
+const pageButtonContainer = document.querySelector(".page__container");
+const pageButtons = document.querySelectorAll(".page__button");
+
+//Global variables
+let currentSearch = "";
+
+const firstSearch = `http://www.omdbapi.com/?s=star+wars&y=2018&page=1&type=movie&apikey=${apiKey}`
+
+fetchResults(firstSearch);
+
+
+ // INITIAL FETCH AND PAGINATION
+
+
+//Fetch results function
+function fetchResults(url) {
+ fetch(url)
+ .then(response => response.json())
+ .then(function(body){
+ resultTemplate(body.Search);
+ pagination(body, body.Search);
+ })
+};
+
+//Automatically paginates per amount of returns
+function pagination(totalReturn, returnArr){
+ const pagesRequired = Math.ceil(totalReturn.totalResults / returnArr.length);
+ for (let i = 1; i <= pagesRequired; i++){
+ const button = document.createElement("button");
+ button.className = "page__button";
+ button.textContent = i;
+ pageButtonContainer.appendChild(button);
+ }
+};
+
+
+
+
+ // PAGE POPULATION
+
+
+//Creates result template
+function resultTemplate(arr) {
+ let results = arr.map(function(film){
+ let poster = (film.Poster === "N/A") ? "images/noimage.png" : film.Poster;
+ let movieItem =
+ `
+
${film.Title}
+
+
(${film.Year})
+
+
+
+ `;
+ return movieItem;
+ })
+ populateResults(results);
+};
+
+//Populates results container
+function populateResults(arr) {
+ resultsContainer.innerHTML = arr.join().replace(/,/g, " ");
+ addFavouriteListener();
+ addInfoListener();
+};
+
+
+
+
+ // SEARCH FUNCTION
+
+
+//Event listener for search feature
+searchForm.addEventListener("submit", function(event) {
+ event.preventDefault();
+ currentSearch = searchBox.value;
+ updatePage(searchBox.value, 1);
+});
+
+//Formats search values for url
+function formatSearchTerm(term) {
+ return term.split(" ").join("+");
+};
+
+ // CONTENT CLEARING FUNCTIONS
+
+
+
+
+//Clears page of current results when updated
+function clearResults() {
+ const previousItems = document.querySelectorAll(".search__result");
+ previousItems.forEach(node => {
+ node.parentNode.removeChild(node);
+ })
+};
+
+//Clears current page buttons when updated
+function clearPages() {
+ const previousPages = document.querySelectorAll(".page__button");
+ previousPages.forEach(node => {
+ node.parentNode.removeChild(node);
+ })
+}
+
+
+
+
+
+ // GENERATING NEW URLS
+
+
+
+//Event listener for page numbers
+pageButtonContainer.addEventListener("click", function(event){
+ updatePage(null, event.target.textContent);
+});
+
+
+//Accepts new search term and/or page number and submits new url to fetch function
+function updatePage(term, page){
+ clearPages();
+ clearResults();
+ const formattedTerm = (term === null) ? currentSearch : formatSearchTerm(term)
+ const searchUrl = `http://www.omdbapi.com/?s=${formattedTerm}&page=${page}&type=movie&apikey=${apiKey}`;
+ fetchResults(searchUrl);
+};
+
+
+
+ // MOVIE INFO GENERATOR
+
+
+
+//Listener for clicks on movie coontainers to either fetch information or trigger class toggles to hide previously displayed information from view (Only working in part, works the first time and then generates another lot of information, before then triggering toggle again)
+function addInfoListener() {
+ const moreInfo = document.querySelectorAll(".more__info__button");
+ moreInfo.forEach(button => {
+ button.addEventListener("click", function(event) {
+ if ((Array.from(event.target.parentNode.childNodes).some(node => node.className === "movie__info--closed") === false)) {
+ fetchMovieInfo(event.target.parentNode.id);
+ } else if ((Array.from(event.target.parentNode.childNodes).some(node => node.className === "movie__info") === false)) {
+ fetchMovieInfo(event.target.parentNode.id);
+ } else if ((Array.from(event.target.parentNode.childNodes).some(node => node.className === "movie__info--closed") === true)) {
+ let infoToggle = document.getElementById(`info${event.target.parentNode.id}`);
+ infoToggle.classList.toggle("movie__info");
+ } else if ((Array.from(event.target.parentNode.childNodes).some(node => node.className === "movie__info--closed") === true)) {
+ let infoToggle = document.getElementById(`info${event.target.parentNode.id}`);
+ infoToggle.classList.toggle("movie__info");
+ }
+ })
+ })
+}
+
+//Fetches movie information when even is triggered
+function fetchMovieInfo(id) {
+ const movieUrl = `http://www.omdbapi.com/?i=${id}&apikey=${apiKey}`;
+ fetch(movieUrl)
+ .then(response => response.json())
+ .then(body => movieInfoTempate(body));
+}
+
+//Creates template for additional infomormation
+function movieInfoTempate(movie) {
+ const ratings = movie.Ratings.map(rating => {
+ return `
+