diff --git a/README.md b/README.md index 49093dd2..196b7aba 100644 --- a/README.md +++ b/README.md @@ -1,48 +1,23 @@ -# Project Cinema +## Cinema App +This is a simple paginated website, presenting information from two APIs: omdbapi, and themoviedb. +Search for a movie or show and receive results based on that query. Selecting results will bring up more detailed +information, including a sample review. -We want to create a movie search engine. To power it we will use the [Open Movie Database](http://www.omdbapi.com) API. +## Setting Up +Clone the repo: +``` +git clone [repo path] +``` +Install dependencies +``` +npm i +``` +Copy and paste the path of the index.html document into your browser. -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. +## Built With +Vanilla JS +CSS +HTML -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. diff --git a/images/Facebook-1s-200px.gif b/images/Facebook-1s-200px.gif new file mode 100644 index 00000000..630ded46 Binary files /dev/null and b/images/Facebook-1s-200px.gif differ diff --git a/images/background_image.jpg b/images/background_image.jpg new file mode 100644 index 00000000..9c8bbdb1 Binary files /dev/null and b/images/background_image.jpg differ diff --git a/images/magnifier-tool.png b/images/magnifier-tool.png new file mode 100644 index 00000000..46c8d2d8 Binary files /dev/null and b/images/magnifier-tool.png differ diff --git a/images/question.png b/images/question.png new file mode 100644 index 00000000..ddcd9b38 Binary files /dev/null and b/images/question.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..8a6785fc --- /dev/null +++ b/index.html @@ -0,0 +1,34 @@ + + + + + + + + + Cinema App + + + +
+
+
+ +
+
+
+ +
+ +
+ +
+ +
+ + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 00000000..21a3b92e --- /dev/null +++ b/index.js @@ -0,0 +1,182 @@ +const baseUrlSearch = "http://www.omdbapi.com/?apikey=305417ec&s="; +const baseUrlSpecific = "http://www.omdbapi.com/?apikey=305417ec&t="; +const filmContainer = document.querySelector(".films"); + +const formInput = document.querySelector("form"); +formInput.addEventListener("submit", function(searchEvent) { + filmContainer.innerHTML = ""; + searchEvent.preventDefault(); + let searchInput = document.querySelector(".search__input"); + refineUrl(searchInput.value); +}); + +const refineUrl = search => { + let pageNum = 1; + fetchRefined(`${baseUrlSearch}${search}&page=${pageNum}`); + pageNum++; + nextpage(`${baseUrlSearch}${search}`, pageNum); +}; + +function fetchRefined(url) { + fetch(url) + .then(response => { + return response.json(); + }) + .then(body => bottleneckFetchedData(body)); +} +//prettier-ignore +const bottleneckFetchedData = films => films.Search.forEach(film => createFilmElement(film)); + +function createFilmElement(singleFilmObject) { + const movieListElement = document.createElement("li"); + movieListElement.className = "movie__element"; + + //prettier-ignore + movieListElement.innerHTML = ` +

${singleFilmObject.Title}

(${singleFilmObject.Year})

+
+ +
`; + appendIntoDocument(movieListElement); +} + +const appendIntoDocument = movie => { + filmContainer.appendChild(movie); +}; + +function nextpage(search, pageNum) { + const next = document.createElement("button"); + next.className = "next__page"; + next.textContent = "Next Page"; + + const header = document.querySelector("header"); + header.appendChild(next); + next.addEventListener("click", function(event) { + const films = document.querySelector(".films"); + films.innerHTML = ""; + const nextUrl = `${search}&page=${pageNum++}`; + fetchRefined(nextUrl); + }); +} + +/////////////////////////////////////////////////////// + +filmContainer.addEventListener("click", function(event) { + //prettier-ignore + if (event.target.className === "more__info") { + /*We need the parent node to (more readably) access + the H2 tag. */ + const superParent = event.target.parentNode.parentNode; + const filmName = pullFilmName(superParent.childNodes); + typeSearchFilm(filmName); + //For mobile. + }else if(event.target.className === "movie__img"){ + const mobileSuperParent = event.target.parentNode; + const mobileFilmName = pullFilmName(mobileSuperParent.childNodes); + typeSearchFilm(mobileFilmName); + } +}); + +const pullFilmName = childElementArray => { + console.log(childElementArray.length); + return childElementArray[2].textContent; +}; + +function typeSearchFilm(filmName) { + console.log(filmName); + const url = `${baseUrlSpecific}${filmName}`; + fetch(url) + .then(response => { + return response.json(); + }) + .then(body => createInfoPanel(body)); +} + +async function createInfoPanel(typeSearchedObject) { + //Specify that you will wait for the promise to resolve. + const movieID = await getMovieIDForReview(typeSearchedObject); + const review = await getReview(movieID); + //Currently not operating as intended. + let mobileClose = ""; + screen.width < 700 ? (mobileClose = "Close") : (mobileClose = "x"); + + const infoPanel = document.createElement("div"); + infoPanel.className = "info__panel"; + infoPanel.innerHTML = + //prettier-ignore + `
+ +
+
+ +

${typeSearchedObject.Title}

+

${typeSearchedObject.Year}

+

${typeSearchedObject.Genre}

+
+
+

${typeSearchedObject.Plot}

+

Top Review:

+

${review.content}

+

${review.author}

+
+
+

Directed by: ${typeSearchedObject.Director}

+

Starring: ${typeSearchedObject.Actors}

+
+ +
+ + + + + + + +
`; + //Will need to append it into view. + const filmContainer = document.querySelector(".display__film"); + filmContainer.appendChild(infoPanel); + infoPanel.scrollIntoView(); +} + +const closeInfoPanel = closeButton => { + closeButton.parentNode.parentNode.remove(); +}; + +async function getMovieIDForReview(filmObject) { + let movieDBBaseURI = `https://api.themoviedb.org/3/search/movie?api_key=c1eda2d27f7a73d8ca633b6936e5b012&query=`; + + const response = await fetch(`${movieDBBaseURI}${filmObject.Title}`); + const movieData = await response.json(); + + const movie = movieData.results.find(item => { + if (item.title === filmObject.Title) { + //console.log(item.id); + return item; + } + }); + return movie.id; +} +async function getReview(id) { + //prettier-ignore + const response = await fetch(`https://api.themoviedb.org/3/movie/${id}/reviews?api_key=c1eda2d27f7a73d8ca633b6936e5b012`) + const reviews = await response.json(); + const firstReview = await reviews.results[0]; + if (firstReview != undefined) { + return firstReview; + } else { + return { + content: "No review found for this production.", + author: `See for yourself at themoviedb.org, ID: ${id}` + }; + } +} + +// function youMayAlsoLike(genre, actors, director, writer){ +// //search for films/tv with the same genre, actors and director +// //fail? search for films/tv with same genre and actors +// //fail? search for films with same genre and writer +// fetch(`${baseUrlSearch`){ + +// } +// } diff --git a/style.css b/style.css new file mode 100644 index 00000000..990987a7 --- /dev/null +++ b/style.css @@ -0,0 +1,234 @@ +* { + box-sizing: inherit; +} + +body { + margin: 0; + display: flex; + flex-direction: column; + min-height: 100vh; + box-sizing: border-box; + font-family: "Roboto", sans-serif; +} + +header { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-content: center; + flex: 2; + background: #282e33; +} +.next__page { + display: flex; + align-self: center; + justify-content: center; + height: 50px; + width: 150px; + border-radius: 20px; + background: none; + color: #fff; + border-style: solid; + border-color: #fff; +} + +form { + margin: 50px 50px; + height: 50px; + display: flex; + align-self: center; +} + +.search__input { + background: #ffffff; + border: 0; + padding-left: 20px; + font-size: 1em; +} + +.search__button { + background: url(images/magnifier-tool.png); + background-size: contain; + width: 50px; + height: 50px; + margin-left: 5px; + border: none; +} + +.display__film { + display: flex; + flex-direction: row; + flex: 1; + justify-content: center; + background: #050e1d; +} + +.films { + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + list-style: none; +} + +.movie__img { + max-height: 400px; + max-width: 300px; + align-self: center; + width: auto; + height: auto; +} +.image__interior { + display: none; +} + +.movie__element { + margin: 1em; + align-self: center; + flex-direction: column; + color: #fff; +} + +.movie__date { + margin-top: 5px; +} +.movie__title { + margin-bottom: 5px; +} + +.info__panel { + position: absolute; + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + background: #1d2d47; + color: #fff; +} +.close { + display: flex; + justify-content: center; +} +.info__panel__close { + width: 100%; + padding: 1.5em; + font-size: 1em; + font-family: "Roboto", sans-serif; + background: #152135; + border: 0; + color: #fff; +} +.img__title__date__genre { + background: #1d2d47; +} +.desc { + background: #1d2d47; +} +.director__starring { + background: #152135; +} +.rating { + background: #152135; +} +footer { + height: 900px; + display: flex; + flex: 1; + background-image: url("images/background_image.jpg"); + width: 100%; +} + +@media (min-width: 768px) { + header { + height: 300px; + } + + .search__input { + width: 400px; + } + .films { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + } + .movie__element { + display: flex; + position: relative; + opacity: 1; + transition: 0.5s ease; + backface-visibility: hidden; + } + .movie__element:hover > .movie__img { + opacity: 0.3; + } + .movie__element:hover .image__interior { + opacity: 1; + } + .image__interior { + display: flex; + position: absolute; + top: 6em; + transition: 0.5s ease; + opacity: 0; + align-self: center; + justify-self: center; + } + .image__interior > img { + width: 150px; + height: 150px; + } + .info__panel { + background: #1d2d47; + color: #fff; + position: absolute; + max-width: 50%; + max-height: 70%; + display: grid; + grid-template-columns: 1fr 1fr; + } + .close { + display: grid; + justify-items: end; + grid-column-start: 1; + grid-column-end: 3; + background: #152135; + } + + .info__panel__close { + background: none; + border: none; + color: #fff; + padding: 10px; + } + + .img__title__date__genre { + padding-left: 20px; + background: #1d2d47; + } + .desc { + background: #1d2d47; + padding: 10px; + } + .director__starring { + padding-left: 20px; + background: #152135; + } + .rating { + display: flex; + align-items: center; + justify-content: center; + background: #152135; + } + .stars { + } + + .checked { + color: orange; + } +} + +@media (min-width: 1440px) { +}