Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Final incomplete version of movie cinema #22

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Final incomplete version of movie cinema #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
161dc64
search, display and plot features working
TonyGriffin Sep 22, 2018
7dadfc5
final effort on cinema
TonyGriffin Sep 24, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 72 additions & 0 deletions cinema.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
.container {
margin:auto;
font-family: serif;
width: 100vw;
height: 100vh;
background-color: rgb(70,130,180);
display: flex;
flex-direction: column;
flex:1;
/* align-content: center; */
}

.header__container{
display: flex;
justify-content: center;
text-align: center;
background: gray;
flex:1;
}

.header__text {
font-size: 70px;
text-decoration: underline;
display: flex;
flex:1;
}

.form__container{
display: flex;
flex-direction: column;
margin-bottom: 50px;
flex:1;
}

#form {
display: flex;
justify-content: space-between;
margin-left: 20px;
margin-top: 50px;
margin-bottom: 50px;
}

.results__container {
display: flex;
flex-direction: column;
}

.button {
/* margin-left: 40px; */
background-color: yellow;
margin-right: 30px;
}

ul {
display: flex;
flex-direction: column;
}

ul > li{
/* maybe come back to this and try to add cool emoji's */
display: flex;
flex-direction: column;
list-style: none;
background-color: yellow;
margin: 70px 40px 10px 0;
}

.list_results{
display:flex;
flex-direction: column;
flex:1;
}
32 changes: 32 additions & 0 deletions cinema.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<<link rel="stylesheet" href="cinema.css">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like a duplicate angle bracket

<title>Project Cinema</title>
</head>

<body class="container">

<div class="header__container">
<header class="header__text">Project en vue:</header>
</div>

<div class="form__container">
<form class="form" id="form">
<input class="form__input" type="text">
<button class="button" type="submit">SEARCH</button>
</form>
</div>

<div class="results__container">
<div class="results" id="results">
<ul class="results__list"></ul>
</div>
</div>

<script src="cinema.js"></script>
</body>
</html>
151 changes: 151 additions & 0 deletions cinema.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
//creating a js object to reference the html form element
const form = document.querySelector(".form");
//creating a js object to correspond to a submit event
//then using the text input data as argument to the searchMovies function
const textInput = form.addEventListener( "submit", event => {
//preventing the default action of submitting the event before we've had
//a chance to code anything to this event.
event.preventDefault()
// creating a js object to reference the html text iunput element
const inputField= document.querySelector('.form__input')
// using inputField as the argument for the searchMoviesfunction
searchMovies(inputField.value);
})



//searches for movies in the api datbase, usdiong the argument "movie"
function searchMovies(movie) {
//fetches api with api key and parameter "movie"
fetch(`http://www.omdbapi.com/?apikey=323bfd8f&s=${movie}`)
//.then is carried on on succesful receipt of the data
//response stands for the data that the api has returned.
//we are returning that data in json format
.then(function(response) {
return response.json();
})
//a promise returns a promise, so on successful completion of above
//body, which is the json format of the api data is returned
.then(function(body){
console.log(body);
//we want to diplay the particuloar details of the data we require which
//have been returned by the api search
displayMovies(body.Search)
})
//code for if the promise fails, an exception.
.catch(function(error) {
console.log('Server failed to return data',error);
});
}



let filmItem;
let selectedFilmTitle;

function displayMovies(searchResults) {
//selecting the html element ul as my parent node
const parentNode = document.querySelector(".results__list"); //ul
//map returns a new array, so requires a new variable to
//refence it (movieString)
const movieString = searchResults.map( item => {
//for every item in the searchResults, add a list element
//and insert the following html
// selectedFilmTitle = item.Title;
return `<li class="list_results" data-imdbid=${item.imdbID}>
<img src=${item.Poster}>
<h2> ${item.Title} </h2>
<h4> ${item.Year} </h4>
</li>`


}).join(''); // .join() is required to remove the trailing ,
//Sets the html of the ul to the movieString that was
//created above
parentNode.innerHTML = movieString;
//Below code is for clicking on things
//filmItem is now set to the li's within the ul.
filmItem = document.querySelectorAll('.results__list > li')
//spread operator changes the copy into an array
//ask for clarification on this one??
//Is it because we want to make through the contents?
const filmItemCopy = [...filmItem]
//So for each film item we add an event listener for click
//which calls the fetchMoreDeatilsWithId function
filmItemCopy.map(aFilm => {
aFilm.addEventListener('click', event => {
//fetchMoreDeatilsWithId gets data on
// the film using its id
fetchMoreDeatilsWithId(event.path[1].dataset.imdbid)
fetchAGiphy(event.path[1].dataset.Title)
// fetchAGiphy(event.searchResults.Title)
})
})
}
// console.log(selectedFilmTitle);



//fetchMoreDeatilsWithId gets data on
// the film using its id property
function fetchMoreDeatilsWithId (imdbIDToSearchWith) {
//fetch casll to the api using the parameter of ID to get more info
fetch(`http://www.omdbapi.com/?apikey=323bfd8f&i=${imdbIDToSearchWith}`)
.then(function(response) {
return response.json();
})
.then(function(body){
//Successful receipt of data is passed into the
//addDisplayPlot function.
addDisplayPlot(imdbIDToSearchWith, body);
})
.catch(function(error) {
console.log('Server failed to return data',error);
});
}

// const giphUrl = "https://api.giphy.com/v1/gifs/search?";
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Commented out code can be removed to avoid clutter

// const giphApiKey = "api_key=ggvo0rd0F3430o7HlYXGh2ZwXzPMx0f9";
// const gifquery = "&q=${VARIABLE}&limit=2&offset=0&rating=G&lang=en";

// function fetchAGiphy(movieTitle) {
// fetch(`https://api.giphy.com/v1/gifs/search?api_key=ggvo0rd0F3430o7HlYXGh2ZwXzPMx0f9&q=${movieTitle}&limit=2&offset=0&rating=G&lang=en`)
// .then(function(response) {
// return response.json();
// })
//
// .then(function(body) {
// console.log(body)
// // addGiphy(movieTitle)
// });
//
// .catch(function(error) {
// console.log('Server failed to return data',error);
// });
// }


// function addGiphy(movieTitle) {
// const parentNode = document.querySelector(".results__gifphy")
// parentNode.innerHTML = ``
// }


function addDisplayPlot(imdbIDToSearchWith, movieData) {
// take the plot and set it in to a <p> that i can
//display on the screen, omitting all other li's.
//This parent node is set to the data attribute that
//is the `id` of the movie
const parentNode = document.querySelector(`[data-imdbid=${imdbIDToSearchWith}]`)
//below im setting the inner html of the parent node,
//the ul, to contain a list that has the details for
//the movies and im adding the Plot.
parentNode.innerHTML =
`<li
data-imdbid=${movieData.imdbID}>
<img src=${movieData.Poster}>
<h2> ${movieData.Title} </h2>
<p> ${movieData.Plot}</p>
<h4> ${movieData.Year} </h4>
</li>`
}