From 161dc64202ae466da087b967c47c129b690fec36 Mon Sep 17 00:00:00 2001 From: Tony Griffin Date: Sat, 22 Sep 2018 14:46:07 +0100 Subject: [PATCH 1/2] search, display and plot features working --- cinema.css | 13 ++++++ cinema.html | 30 +++++++++++++ cinema.js | 119 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 162 insertions(+) create mode 100644 cinema.css create mode 100644 cinema.html create mode 100644 cinema.js diff --git a/cinema.css b/cinema.css new file mode 100644 index 00000000..2ca7bdd7 --- /dev/null +++ b/cinema.css @@ -0,0 +1,13 @@ +.container { + font-family: serif; + width: 100vw; + height: 100vh; + background-color: rgba(128,0,0,0.5); + display: flex; + flex-direction: column; +} + +ul > li{ + /* maybe come back to this and try to add cool emoji's */ + list-style: none; +} diff --git a/cinema.html b/cinema.html new file mode 100644 index 00000000..28fde932 --- /dev/null +++ b/cinema.html @@ -0,0 +1,30 @@ + + + + + + + < + Project Cinema + + + +
Project en vue:
+ +
+ + +
+ +
+ + +
+ + + + + + + + diff --git a/cinema.js b/cinema.js new file mode 100644 index 00000000..43b6221f --- /dev/null +++ b/cinema.js @@ -0,0 +1,119 @@ + //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('.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 + 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 + return `
  • + +

    ${item.Title}

    +

    ${item.Year}

    +
    • ` + }).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) + }) + }) + } + + + //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); + }); + } + + + + + function addDisplayPlot(imdbIDToSearchWith, movieData) { + // take the plot and set it in to a

    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 = + `

  • + +

    ${movieData.Title}

    +

    ${movieData.Plot}

    +

    ${movieData.Year}

    +
    • ` + } From 7dadfc5fe8b79ab1650bee652f0b17b6ae33d44f Mon Sep 17 00:00:00 2001 From: Tony Griffin Date: Mon, 24 Sep 2018 09:35:58 +0100 Subject: [PATCH 2/2] final effort on cinema --- cinema.css | 61 ++++++++++++++++++++++++++++++++++++++++++++++++++++- cinema.html | 18 +++++++++------- cinema.js | 44 ++++++++++++++++++++++++++++++++------ 3 files changed, 108 insertions(+), 15 deletions(-) diff --git a/cinema.css b/cinema.css index 2ca7bdd7..3d200cee 100644 --- a/cinema.css +++ b/cinema.css @@ -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; } diff --git a/cinema.html b/cinema.html index 28fde932..f59b30d2 100644 --- a/cinema.html +++ b/cinema.html @@ -9,21 +9,23 @@ -
    Project en vue:
    +
    +
    Project en vue:
    +
    + +
    - +
    +
    +
    -
      - +
        - - - - +
        diff --git a/cinema.js b/cinema.js index 43b6221f..5b7409c7 100644 --- a/cinema.js +++ b/cinema.js @@ -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 `
      • + // selectedFilmTitle = item.Title; + return `

      • ${item.Title}

        ${item.Year}

        • ` - }).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?"; + // 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) {