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.

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
Changes from 1 commit
Commits
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
Prev Previous commit
final effort on cinema
  • Loading branch information
TonyGriffin committed Sep 24, 2018
commit 7dadfc5fe8b79ab1650bee652f0b17b6ae33d44f
61 changes: 60 additions & 1 deletion cinema.css
Original file line number Diff line number Diff line change
@@ -1,13 +1,72 @@
.container {
margin:auto;
font-family: serif;
width: 100vw;
height: 100vh;
background-color: rgba(128,0,0,0.5);
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;
}
18 changes: 10 additions & 8 deletions cinema.html
Original file line number Diff line number Diff line change
@@ -9,21 +9,23 @@
</head>

<body class="container">
<header class="header">Project en vue: </header>

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

<div class="form__container">
<form class="form" id="form">
<input class="input" type="text">
<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>

<ul class="results__list"></ul>
</div>




</div>

<script src="cinema.js"></script>
</body>
44 changes: 38 additions & 6 deletions cinema.js
Original file line number Diff line number Diff line change
@@ -7,7 +7,7 @@ const textInput = form.addEventListener( "submit", event => {
//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('.input')
const inputField= document.querySelector('.form__input')
// using inputField as the argument for the searchMoviesfunction
searchMovies(inputField.value);
})
@@ -40,28 +40,32 @@ function searchMovies(movie) {



let filmItem
let filmItem;
let selectedFilmTitle;

function displayMovies(searchResults) {
//selecting the html element ul as my parent node
const parentNode = document.querySelector(".results-list"); //ul
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
return `<li data-imdbid=${item.imdbID}>
// 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 ,


}).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')
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?
@@ -73,9 +77,13 @@ function searchMovies(movie) {
//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
@@ -96,7 +104,31 @@ function searchMovies(movie) {
});
}

// 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) {