From 2c49310be5f301a9ea685a7e2189b381c1b89582 Mon Sep 17 00:00:00 2001 From: Chris Phillips Date: Sat, 22 Sep 2018 16:51:31 +0100 Subject: [PATCH 1/8] First commit - Search function working, moe info fetch in progress --- index.html | 33 +++++++++++ script.js | 157 +++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 6 ++ 3 files changed, 196 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 00000000..6b86b612 --- /dev/null +++ b/index.html @@ -0,0 +1,33 @@ + + + + + + + Document + + + + + + + +
+
+ + +
+ +
+ + + + + + + + diff --git a/script.js b/script.js new file mode 100644 index 00000000..8cb32259 --- /dev/null +++ b/script.js @@ -0,0 +1,157 @@ +const parentResult = document.querySelector(".hi"); +const extraInfo =[]; + +//I could hardcode this in the html - leaving in for now. +const resultNode = document.createElement("li"); +resultNode.innerHTML = ` +news image`; +parentResult.appendChild(resultNode); + + +//Search Function + +const searchFunc = document.querySelector(".search__form"); +searchFunc.addEventListener("submit", function(event) { + event.preventDefault(); + console.log(event.target['0'].value); + let url = `http://www.omdbapi.com/?s=${event.target['0'].value}&apikey=73071eff`; + fetchIMDB(url); +}) + + + + +//Search result function / index of links/li's + + +function IMDBData(search) { + console.log(search.Search[4].Poster); + + search.Search.map((movies) => { + const resultNode = document.createElement("li"); // make fresh
  • + resultNode.innerHTML = + `
    +

    ${movies.Title}

    +

    ${movies.Year}

     + news image
    `; + parentResult.appendChild(resultNode); + // here + + + document.querySelector("[data-imdb") + + +const clickFilm = document.querySelector(".indiv"); +clickFilm.addEventListener("click", function(event) { + +// console.log({event}) + +let URL2 = `http://www.omdbapi.com/?s=${event.target.id}&apikey=73071eff`; +console.log(URL2); +}); + + }); +} + + + +//More Film info + +//insert here from below when done + + + +//NOt found movie text display + +function notFound(){ + const resultNodes = document.createElement("li") + resultNodes.innerHTML = + `
    help me
    `; + parentResult.appendChild(resultNodes); +}; + + + +// Initial Search Fetch +function fetchIMDB(url){ + + fetch(url) + .then(function(response) { + + return response.json(); + }) + .then(function(search){ + + // If unknown result + if (search.Response === 'False') { + parentResult.innerHTML = ""; + console.log(search) + notFound(); + } + else + { parentResult.innerHTML = ""; + IMDBData(search); + + } + }); + // .catch(function(error) { + // displayErrorToUser3(`${error} ahhhh server problem`); + // }); +} + +//MORE INFO APPEARS UPON CLICK - FETCH + +function fetchMoreInfo(movieURL){ //default for now + + fetch(`http://www.omdbapi.com/?i=tt0816692&apikey=73071eff`) + .then(function(response) { + + return response.json(); + }) + .then(function(find){ + + // parentResult.innerHTML = ""; + + movieMore(find); + console.log(find); + }); + // .catch(function(error) { + // displayErrorToUser3(`${error} ahhhh server problem`); + // }); +} + +// FETCH RESULT MORE WHAT TO DO WITH IT +function movieMore(find){ + const parentResult = ""; + + find.Map(moreMovies => { + + + + // extraInfo[index] = image.urls.regular; + + }) + + + + + console.log(find); + +}; + + +fetchMoreInfo(); + +// function IMDBData(search) { +// console.log(search.Search[4].Poster); + +// search.Search.map(movies => { +// const resultNode = document.createElement("li"); // make fresh
  • +// resultNode.innerHTML = +// ` +//

    ${movies.Title}

    +//

    ${movies.Year}

     +// news image`; +// parentResult.appendChild(resultNode); +// }); +// } diff --git a/style.css b/style.css new file mode 100644 index 00000000..1d073f82 --- /dev/null +++ b/style.css @@ -0,0 +1,6 @@ +* { + box-sizing: border-box; + + } + + \ No newline at end of file From 18da36ce67edc3bc9b57a76306d4e30cdec31f0a Mon Sep 17 00:00:00 2001 From: chrisphillers Date: Sun, 23 Sep 2018 14:58:54 +0100 Subject: [PATCH 2/8] More info event listener attempt --- script.js | 46 +++++++++++++++++++++++++--------------------- style.css | 17 ++++++++++++++++- 2 files changed, 41 insertions(+), 22 deletions(-) diff --git a/script.js b/script.js index 8cb32259..9dd3c369 100644 --- a/script.js +++ b/script.js @@ -1,11 +1,13 @@ -const parentResult = document.querySelector(".hi"); +//HTML Element Targets +const parentSearchResult = document.querySelector(".hi"); +const searchResultNode = document.createElement("li"); const extraInfo =[]; //I could hardcode this in the html - leaving in for now. -const resultNode = document.createElement("li"); -resultNode.innerHTML = ` +// Default 'Search' view +searchResultNode.innerHTML = ` news image`; -parentResult.appendChild(resultNode); +parentSearchResult.appendChild(searchResultNode); //Search Function @@ -28,25 +30,27 @@ function IMDBData(search) { console.log(search.Search[4].Poster); search.Search.map((movies) => { - const resultNode = document.createElement("li"); // make fresh
  • - resultNode.innerHTML = - `
    + const searchResultNode = document.createElement("li"); // make fresh
  • + searchResultNode.innerHTML = + `

    ${movies.Title}

    ${movies.Year}

     news image
    `; - parentResult.appendChild(resultNode); + parentSearchResult.appendChild(searchResultNode); // here - document.querySelector("[data-imdb") + // document.querySelector("[data-imdb") + // Event Listener to fetch more info on Movie - BROKEN const clickFilm = document.querySelector(".indiv"); clickFilm.addEventListener("click", function(event) { -// console.log({event}) +// console.log(event.target['0'].value); +console.log(event.target); -let URL2 = `http://www.omdbapi.com/?s=${event.target.id}&apikey=73071eff`; +let URL2 = `http://www.omdbapi.com/?s=${event.target.value}&apikey=73071eff`; console.log(URL2); }); @@ -64,10 +68,10 @@ console.log(URL2); //NOt found movie text display function notFound(){ - const resultNodes = document.createElement("li") - resultNodes.innerHTML = + const searchResultNodes = document.createElement("li") + searchResultNodes.innerHTML = `
    help me
    `; - parentResult.appendChild(resultNodes); + parentSearchResult.appendChild(searchResultNodes); }; @@ -84,12 +88,12 @@ function fetchIMDB(url){ // If unknown result if (search.Response === 'False') { - parentResult.innerHTML = ""; + parentSearchResult.innerHTML = ""; console.log(search) notFound(); } else - { parentResult.innerHTML = ""; + { parentSearchResult.innerHTML = ""; IMDBData(search); } @@ -110,7 +114,7 @@ function fetchMoreInfo(movieURL){ //default for now }) .then(function(find){ - // parentResult.innerHTML = ""; + // parentSearchResult.innerHTML = ""; movieMore(find); console.log(find); @@ -122,7 +126,7 @@ function fetchMoreInfo(movieURL){ //default for now // FETCH RESULT MORE WHAT TO DO WITH IT function movieMore(find){ - const parentResult = ""; + const parentSearchResult = ""; find.Map(moreMovies => { @@ -146,12 +150,12 @@ fetchMoreInfo(); // console.log(search.Search[4].Poster); // search.Search.map(movies => { -// const resultNode = document.createElement("li"); // make fresh
  • -// resultNode.innerHTML = +// const searchResultNode = document.createElement("li"); // make fresh
  • +// searchResultNode.innerHTML = // ` //

    ${movies.Title}

    //

    ${movies.Year}

     // news image`; -// parentResult.appendChild(resultNode); +// parentSearchResult.appendChild(searchResultNode); // }); // } diff --git a/style.css b/style.css index 1d073f82..0bfdfa97 100644 --- a/style.css +++ b/style.css @@ -3,4 +3,19 @@ } - \ No newline at end of file + + + /* Medium devices (tablets, 768px and up) */ +@media (min-width: 768px) { + +} + +/* Large devices (desktops, 960px and up) */ +@media (min-width: 960px) { + +} + +/* Extra large devices (large desktops, 1200px and up) */ +@media (min-width: 1200px) { + +} \ No newline at end of file From e507963c17cedbb7d8214457f3b1f6777f9cdc7c Mon Sep 17 00:00:00 2001 From: chrisphillers Date: Sun, 23 Sep 2018 17:33:43 +0100 Subject: [PATCH 3/8] 'More info' functionality --- index.html | 4 +- script.js | 114 +++++++++++++++++++---------------------------------- 2 files changed, 42 insertions(+), 76 deletions(-) diff --git a/index.html b/index.html index 6b86b612..aa166bf0 100644 --- a/index.html +++ b/index.html @@ -19,9 +19,9 @@ -
      - +
      +
      diff --git a/script.js b/script.js index 9dd3c369..00b9baf2 100644 --- a/script.js +++ b/script.js @@ -1,7 +1,9 @@ //HTML Element Targets -const parentSearchResult = document.querySelector(".hi"); +const parentSearchResult = document.querySelector(".results"); const searchResultNode = document.createElement("li"); const extraInfo =[]; +const parentMoreInfo = document.querySelector(".more__info"); + //I could hardcode this in the html - leaving in for now. // Default 'Search' view @@ -11,7 +13,6 @@ parentSearchResult.appendChild(searchResultNode); //Search Function - const searchFunc = document.querySelector(".search__form"); searchFunc.addEventListener("submit", function(event) { event.preventDefault(); @@ -21,51 +22,35 @@ searchFunc.addEventListener("submit", function(event) { }) - - //Search result function / index of links/li's - function IMDBData(search) { - console.log(search.Search[4].Poster); + // console.log(search.Search[4].Poster); search.Search.map((movies) => { - const searchResultNode = document.createElement("li"); // make fresh
    • + const searchResultNode = document.createElement("li"); searchResultNode.innerHTML = - `
      + `

      ${movies.Title}

      -

      ${movies.Year}

       +

      ${movies.Year}

      news image
      `; + console.log(movies.imdbID); parentSearchResult.appendChild(searchResultNode); - // here - - - // document.querySelector("[data-imdb") - - // Event Listener to fetch more info on Movie - BROKEN - -const clickFilm = document.querySelector(".indiv"); -clickFilm.addEventListener("click", function(event) { -// console.log(event.target['0'].value); -console.log(event.target); + //Event listener of individual listed movies - sends URL to fetch for more info -let URL2 = `http://www.omdbapi.com/?s=${event.target.value}&apikey=73071eff`; -console.log(URL2); -}); + const filmSelector = document.querySelector(`[data-imdb=${movies.imdbID}]`); + filmSelector.addEventListener("click", event => { + console.log(movies.imdbID); + let movieURL = `http://www.omdbapi.com/?i=${movies.imdbID}&apikey=73071eff`; + fetchMoreInfo(movieURL); + console.log(movieURL); + }); + }); + } - }); -} - - - -//More Film info -//insert here from below when done - - - -//NOt found movie text display +//Not found movie text display function notFound(){ const searchResultNodes = document.createElement("li") @@ -75,7 +60,6 @@ function notFound(){ }; - // Initial Search Fetch function fetchIMDB(url){ @@ -98,64 +82,46 @@ function fetchIMDB(url){ } }); - // .catch(function(error) { - // displayErrorToUser3(`${error} ahhhh server problem`); - // }); + } //MORE INFO APPEARS UPON CLICK - FETCH function fetchMoreInfo(movieURL){ //default for now - fetch(`http://www.omdbapi.com/?i=tt0816692&apikey=73071eff`) + fetch(movieURL) .then(function(response) { return response.json(); }) - .then(function(find){ + .then(function(finder){ - // parentSearchResult.innerHTML = ""; + parentMoreInfo.innerHTML = ""; - movieMore(find); - console.log(find); + movieMore(finder); + // console.log(find); }); // .catch(function(error) { // displayErrorToUser3(`${error} ahhhh server problem`); // }); } -// FETCH RESULT MORE WHAT TO DO WITH IT -function movieMore(find){ - const parentSearchResult = ""; - - find.Map(moreMovies => { +// 'More info - detail displayed on page +function movieMore(finder){ + const moreInfoNode = document.createElement("li"); + moreInfoNode.innerHTML = + `
      + news image +

      ${finder.Title}

      +

      ${finder.Year}

      +

      ${finder.Actors}

      +

      ${finder.Director}

      +

      ${finder.Plot}

      +

      ${finder.rating}

      +
      `; - // extraInfo[index] = image.urls.regular; - - }) - - + parentMoreInfo.appendChild(moreInfoNode); - - console.log(find); - -}; - - -fetchMoreInfo(); - -// function IMDBData(search) { -// console.log(search.Search[4].Poster); - -// search.Search.map(movies => { -// const searchResultNode = document.createElement("li"); // make fresh
    • -// searchResultNode.innerHTML = -// ` -//

      ${movies.Title}

      -//

      ${movies.Year}

       -// news image`; -// parentSearchResult.appendChild(searchResultNode); -// }); -// } +} From 995f7ac19da1b3d9fca68f3cc52ff415c93b4e29 Mon Sep 17 00:00:00 2001 From: chrisphillers Date: Sun, 23 Sep 2018 19:18:27 +0100 Subject: [PATCH 4/8] Trailer functionality --- index.html | 7 ++----- script.js | 59 ++++++++++++++++++++++++++++++++++++++++++++++-------- style.css | 8 ++++++++ 3 files changed, 61 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index aa166bf0..a3274e94 100644 --- a/index.html +++ b/index.html @@ -9,12 +9,10 @@ - -
      +

      What film?

      @@ -22,9 +20,8 @@
      +
      - - diff --git a/script.js b/script.js index 00b9baf2..d6ebbe76 100644 --- a/script.js +++ b/script.js @@ -1,8 +1,10 @@ //HTML Element Targets const parentSearchResult = document.querySelector(".results"); const searchResultNode = document.createElement("li"); -const extraInfo =[]; +const searchFunc = document.querySelector(".search__form"); const parentMoreInfo = document.querySelector(".more__info"); +const moreInfoNode = document.createElement("li"); +let trailerClip = ''; //I could hardcode this in the html - leaving in for now. @@ -13,7 +15,7 @@ parentSearchResult.appendChild(searchResultNode); //Search Function -const searchFunc = document.querySelector(".search__form"); + searchFunc.addEventListener("submit", function(event) { event.preventDefault(); console.log(event.target['0'].value); @@ -40,12 +42,12 @@ function IMDBData(search) { //Event listener of individual listed movies - sends URL to fetch for more info const filmSelector = document.querySelector(`[data-imdb=${movies.imdbID}]`); - filmSelector.addEventListener("click", event => { - console.log(movies.imdbID); + filmSelector.addEventListener("click", event => { let movieURL = `http://www.omdbapi.com/?i=${movies.imdbID}&apikey=73071eff`; fetchMoreInfo(movieURL); - console.log(movieURL); - }); + let trailerURL = `https://api.themoviedb.org/3/movie/${movies.imdbID}/videos?api_key=8aed3c92a5c6ef5e792ffaf51ac22616&language=en-US` + fetchTrailer(trailerURL); + }); }); } @@ -60,6 +62,11 @@ function notFound(){ }; +function notFoundTrailer() { +//TO DO +}; + + // Initial Search Fetch function fetchIMDB(url){ @@ -85,6 +92,42 @@ function fetchIMDB(url){ } +//Trailer fetch + +function fetchTrailer(trailerURL){ + + fetch(trailerURL) + .then(function(response) { + + return response.json(); + }) + .then(function(result){ + + // If unknown result + if (result.Response === 'False') { + // parentSearchResult.innerHTML = ""; + console.log(result) + notFoundTrailer(); + } + else + { + // parentSearchResult.innerHTML = ""; + trailerVideo(result); + console.log(result) + } + }); + +} + +// fetchTrailer(); +function trailerVideo(result){ +trailerClip = `https://www.youtube.com/watch?v=${result.results[0].key}`; +}; +console.log(trailerClip); +// console.log(fetchTrailer()); + + + //MORE INFO APPEARS UPON CLICK - FETCH function fetchMoreInfo(movieURL){ //default for now @@ -110,7 +153,7 @@ function fetchMoreInfo(movieURL){ //default for now function movieMore(finder){ - const moreInfoNode = document.createElement("li"); + moreInfoNode.innerHTML = `
      news image @@ -119,7 +162,7 @@ function movieMore(finder){

      ${finder.Actors}

      ${finder.Director}

      ${finder.Plot}

      -

      ${finder.rating}

      +

      ${trailerClip}

      `; parentMoreInfo.appendChild(moreInfoNode); diff --git a/style.css b/style.css index 0bfdfa97..bd91ff4c 100644 --- a/style.css +++ b/style.css @@ -5,6 +5,14 @@ + a:hover { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23ff9800' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E"); + background-position: 0 100%; + background-size: auto 6px; + background-repeat: repeat-x; + text-decoration: none; + } + /* Medium devices (tablets, 768px and up) */ @media (min-width: 768px) { From d22e5dd1cb2497c3b3bf967107b2c6ff0a6d164a Mon Sep 17 00:00:00 2001 From: chrisphillers Date: Mon, 24 Sep 2018 00:34:47 +0100 Subject: [PATCH 5/8] Mobile layout, slider layout - slider toggle to complete --- index.html | 17 +++-- script.js | 74 +++++++++++++++------ style.css | 192 +++++++++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 255 insertions(+), 28 deletions(-) diff --git a/index.html b/index.html index a3274e94..6a91a7da 100644 --- a/index.html +++ b/index.html @@ -7,22 +7,31 @@ Document +
      -

      What film?

      +

      Quelle film?

      - +
      -
      -
      + +
      + + + + + + + + diff --git a/script.js b/script.js index d6ebbe76..3532c552 100644 --- a/script.js +++ b/script.js @@ -2,15 +2,17 @@ const parentSearchResult = document.querySelector(".results"); const searchResultNode = document.createElement("li"); const searchFunc = document.querySelector(".search__form"); -const parentMoreInfo = document.querySelector(".more__info"); -const moreInfoNode = document.createElement("li"); + +const parentMoreInfoSlider = document.querySelector(".more__info__slider"); +const moreInfoNodeAside = document.createElement("li"); +const moreInfoNodeSlider = document.createElement("li"); let trailerClip = ''; //I could hardcode this in the html - leaving in for now. // Default 'Search' view searchResultNode.innerHTML = ` -news image`; +news image`; parentSearchResult.appendChild(searchResultNode); @@ -19,7 +21,7 @@ parentSearchResult.appendChild(searchResultNode); searchFunc.addEventListener("submit", function(event) { event.preventDefault(); console.log(event.target['0'].value); - let url = `http://www.omdbapi.com/?s=${event.target['0'].value}&apikey=73071eff`; + let url = `https://www.omdbapi.com/?s=${event.target['0'].value}&apikey=73071eff`; fetchIMDB(url); }) @@ -32,10 +34,9 @@ function IMDBData(search) { search.Search.map((movies) => { const searchResultNode = document.createElement("li"); searchResultNode.innerHTML = - `
      -

      ${movies.Title}

      -

      ${movies.Year}

      - news image
      `; + `
      +

      ${movies.Title}, ${movies.Year}

       + news image
      `; console.log(movies.imdbID); parentSearchResult.appendChild(searchResultNode); @@ -43,10 +44,14 @@ function IMDBData(search) { const filmSelector = document.querySelector(`[data-imdb=${movies.imdbID}]`); filmSelector.addEventListener("click", event => { - let movieURL = `http://www.omdbapi.com/?i=${movies.imdbID}&apikey=73071eff`; + let movieURL = `https://www.omdbapi.com/?i=${movies.imdbID}&apikey=73071eff`; fetchMoreInfo(movieURL); let trailerURL = `https://api.themoviedb.org/3/movie/${movies.imdbID}/videos?api_key=8aed3c92a5c6ef5e792ffaf51ac22616&language=en-US` fetchTrailer(trailerURL); + let imdbID = movies.imdbID; + // defunct function to push more info next to relevant film + // imdbInfo(imdbID) + // console.log(imdbID); }); }); } @@ -139,7 +144,7 @@ function fetchMoreInfo(movieURL){ //default for now }) .then(function(finder){ - parentMoreInfo.innerHTML = ""; + // parentMoreInfo.innerHTML = ""; movieMore(finder); // console.log(find); @@ -153,18 +158,47 @@ function fetchMoreInfo(movieURL){ //default for now function movieMore(finder){ +//defunct attempt at inserting more info to right of relevant film div + + // function imdbInfo(data){ + // console.log(data); + // const parentMoreInfo = document.querySelector(`#${data}`); - moreInfoNode.innerHTML = - `
      - news image -

      ${finder.Title}

      -

      ${finder.Year}

      -

      ${finder.Actors}

      -

      ${finder.Director}

      -

      ${finder.Plot}

      -

      ${trailerClip}

      + // moreInfoNodeAside.innerHTML = + // `
      + // news image + //

      ${finder.Title}

      + //

      ${finder.Year}

      + //

      ${finder.Actors}

      + //

      ${finder.Director}

      + //

      ${finder.Plot}

      + //

      ${trailerClip}

      + //
      `; + + // parentMoreInfo.appendChild(moreInfoNodeAside); + + // } + + moreInfoNodeSlider.innerHTML = + `
      +
      + news image +
        +
      • ${finder.Title}
        • +
      • ${finder.Year}
        • +
      • ${finder.imdbRating}
        • +
      • ${finder.Director}
        • +
      +
      X
      +
      +
      ${finder.Plot}
      +
      ${trailerClip}
      `; - parentMoreInfo.appendChild(moreInfoNode); + parentMoreInfoSlider.appendChild(moreInfoNodeSlider); } + + + + diff --git a/style.css b/style.css index bd91ff4c..c006cc58 100644 --- a/style.css +++ b/style.css @@ -1,11 +1,20 @@ * { box-sizing: border-box; - + margin:0; + padding:0; } - + h1 { + display:flex; + justify-content: center; + justify-content: space-around; + margin-bottom: 10px; + margin-top:10px; + + + } - a:hover { + h1 a:hover { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23ff9800' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E"); background-position: 0 100%; background-size: auto 6px; @@ -13,6 +22,178 @@ text-decoration: none; } + h2{ + font-size: 15px; + margin-left: 10px; + margin-bottom: 16px; + } + + a{ + text-decoration: none; + } + + ul { + list-style-type: none; + + + } + li{ + display:flex; + justify-content: center; + max-width: 350px; + } + .results{ + display:flex; + flex-direction: column; + + justify-content: center; + + } + .results__wrapper{ + padding-top:30px; + } + + .results:hover > .more__info__slider { + bottom: 0%; + } + + + + .title{ + display:flex; + justify-content: center; + } + .search__form{ + display:flex; + justify-content: center; + + } + + body{ + display:flex; + justify-content: center; + font-family: 'Archivo Black', sans-serif; + /* background-color: beige; */ + } + + .main{ + + } + +.titles{ + + + +} + +form { + margin:0px ; + +} +.search__box { + padding:8px 15px; + background:rgba(50, 50, 50, 0.2); + border:0px solid #dbdbdb; + border-radius: 10px 0px 0px 10px; + -moz-border-radius: 10px 0px 0px 10px; + -webkit-border-radius: 10px 0px 0px 10px; +} +button { + position:relative; + padding:8px 11px; + left:0px; + border:2px solid #207cca; + background-color:#207cca; + color:#fafafa; + border-radius: 0px 10px 10px 0px; + -moz-border-radius: 0px 10px 10px 0px; + -webkit-border-radius: 0px 10px 10px 0px; +} +button:hover { + background-color:#fafafa; + color:#5c89b1; +} +.search__form{ + + } + +.default{ + margin-top:15px; +} + + +.results img{ + width: 100%; + border-radius: 15px 15px 15px 15px; + -moz-border-radius: 15px 15px 15px 15px; + -webkit-border-radius: 15px 15px 15px 15px; + border: 0px solid #000000; + -webkit-box-shadow: 10px 10px 46px -1px rgba(0,0,0,0.5); +-moz-box-shadow: 10px 10px 46px -1px rgba(0,0,0,0.5); +box-shadow: 10px 10px 46px -1px rgba(0,0,0,0.5); +} + +.results img:hover{ + background-color:#000; + opacity:0.7; + +} + +.more__info__slider { + display:flex; + padding-top: 5%; + + /* display:none; */ + position: fixed; + bottom: -100%; + left: 0px; + width: 100vw; + height: 100vh; + background-color: white; + transition:bottom 2.5s; + margin-right:0px; + opacity: 0.9; + + } + + .more__info__slider img { + width: 50%; + height: 100%; + margin: 10px 25px 20px 20px; + border-radius: 10px; + + } + + .mini__header { + display:flex; + flex-direction: row; + justify-content: space-between; + flex:1; + } +.more__info__list { + display:flex; + align-items: flex-start; + flex-direction: column; +} + +.close{ + display:flex; + justify-content: flex-end; + +} + +.plot { + display:flex; + flex:1; + padding-left: 20px; + padding-right: 5px; + +} + +.trailer { + display:none; +} + /* Medium devices (tablets, 768px and up) */ @media (min-width: 768px) { @@ -26,4 +207,7 @@ /* Extra large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) { -} \ No newline at end of file +} + + + From f5111026571e0c0d524f3e6f387ad8bc317f9098 Mon Sep 17 00:00:00 2001 From: chrisphillers Date: Mon, 24 Sep 2018 00:51:08 +0100 Subject: [PATCH 6/8] error display --- script.js | 4 +++- style.css | 14 ++++++++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/script.js b/script.js index 3532c552..fea22ebf 100644 --- a/script.js +++ b/script.js @@ -62,7 +62,9 @@ function IMDBData(search) { function notFound(){ const searchResultNodes = document.createElement("li") searchResultNodes.innerHTML = - `
      help me
      `; + `
      Oh dear we cant find that film + +
      `; parentSearchResult.appendChild(searchResultNodes); }; diff --git a/style.css b/style.css index c006cc58..c4fd16cb 100644 --- a/style.css +++ b/style.css @@ -194,6 +194,20 @@ box-shadow: 10px 10px 46px -1px rgba(0,0,0,0.5); display:none; } +.oops{ + display:flex; + justify-content: center; + position: center; + flex-direction: column; + align-items: center; + padding-top: 20%; + +} +.crying{ + margin-top: 20% + +} + /* Medium devices (tablets, 768px and up) */ @media (min-width: 768px) { From cf8aa3a6830c646445a432bdee5152f3165a07e3 Mon Sep 17 00:00:00 2001 From: chrisphillers Date: Mon, 24 Sep 2018 01:07:59 +0100 Subject: [PATCH 7/8] desktop layout start, inc slider --- script.js | 4 ++-- style.css | 34 ++++++++++++++++++++++++++++++++++ 2 files changed, 36 insertions(+), 2 deletions(-) diff --git a/script.js b/script.js index fea22ebf..469d0497 100644 --- a/script.js +++ b/script.js @@ -194,8 +194,8 @@ function movieMore(finder){
      X
      ${finder.Plot}
      -
      ${trailerClip}
      - `; + + `; parentMoreInfoSlider.appendChild(moreInfoNodeSlider); diff --git a/style.css b/style.css index c4fd16cb..970aa5f9 100644 --- a/style.css +++ b/style.css @@ -153,6 +153,7 @@ box-shadow: 10px 10px 46px -1px rgba(0,0,0,0.5); transition:bottom 2.5s; margin-right:0px; opacity: 0.9; + z-index: 2; } @@ -211,6 +212,39 @@ box-shadow: 10px 10px 46px -1px rgba(0,0,0,0.5); /* Medium devices (tablets, 768px and up) */ @media (min-width: 768px) { + + .trailer { + display: block + } + .more__info__slider { + display:flex; + padding-top: 5%; + + /* display:none; */ + position: fixed; + bottom: -200px; + left: 100px; + width: 100vw; + height: 100vh; + background-color: white; + transition:bottom 2.5s; + margin-right:0px; + opacity: 0.9; + + } + + .results{ + display:flex; + flex-wrap: wrap; + flex-direction: row; + + } + + results li { + + } + + } /* Large devices (desktops, 960px and up) */ From 4d35676ad26f6887402a8b154240b6be59740abb Mon Sep 17 00:00:00 2001 From: Chris Phillips Date: Thu, 27 Sep 2018 22:43:09 +0100 Subject: [PATCH 8/8] Slider/Toggle fixed --- script.js | 75 ++++++++++++++++++++++++++++++++++++++++++++++++++++++- style.css | 71 ++++++++++++++++++++++++++++++++++++++++++++++------ 2 files changed, 138 insertions(+), 8 deletions(-) diff --git a/script.js b/script.js index 469d0497..8bc6b246 100644 --- a/script.js +++ b/script.js @@ -18,8 +18,14 @@ parentSearchResult.appendChild(searchResultNode); //Search Function -searchFunc.addEventListener("submit", function(event) { +//DMITRI +//const searchFunc = document.querySelector(".search__form") +// const query = searchFunc.value; +//fetchIMDB(url); + +searchFunc.addEventListener("submit", event => { event.preventDefault(); + console.log(event.target['0'].value); let url = `https://www.omdbapi.com/?s=${event.target['0'].value}&apikey=73071eff`; fetchIMDB(url); @@ -40,6 +46,50 @@ function IMDBData(search) { console.log(movies.imdbID); parentSearchResult.appendChild(searchResultNode); +//DMITRI + +// should go in more info section +// const moviesList = search.Search.map(movieItem => { +// const isFavourite = favourites.indexOf(movieItem.imdbId) !== -1; + +// let button; +// if (isFavourite){ +// button = //addtofavourites +// } else { +// button = //removefromfavourites +// } + +// return ` +//
      +/* */ +// etc +// ` +// }); +// joins the string results (below) +// const moviesContainer = document.querySelector(".movies") +// moviesContainer.innerHTML = moviesList.join(''); + +// const favourites = !favouritesString ? JSON.parse(favouritesString); //global var array - add to top of page. //converts to string +// const favouritesString = localstorage.getItem('favourites'); + +// event listener for favourites +// moviesContainer.addEventlistener('click', event => { +// if(event.target.matches('.add-to-favs')){ +// const movieId = event.target.dataset.movieId; //dataset - grabs any data attribute (classish) on page, plus the text after, removing the kebabcase. +// addToFavourites(movieID); +// } +// }); +//function to store favs +// function addToFavourites(movieId){ +// favourites.push(movieId); //creating favourites array +// localStorage.setItem('favourites', JSON.stringify(favourites)); //moving favourite array in to local storage. JSON stringify??? +// } + +// function updateButton((button, movieId){ + button.outerHTML = +}) +//END DMITRI + //Event listener of individual listed movies - sends URL to fetch for more info const filmSelector = document.querySelector(`[data-imdb=${movies.imdbID}]`); @@ -52,6 +102,7 @@ function IMDBData(search) { // defunct function to push more info next to relevant film // imdbInfo(imdbID) // console.log(imdbID); + toggleSliderOpen(); }); }); } @@ -74,6 +125,21 @@ function notFoundTrailer() { }; +//toggles + +function toggleSliderOpen() { + + document.querySelector(".more__info__slider").classList.toggle("expanded", true); + }; + +function toggleSliderClose() { + + + document.querySelector(".more__info__slider").classList.toggle("expanded", false); + }; + + + // Initial Search Fetch function fetchIMDB(url){ @@ -199,6 +265,13 @@ function movieMore(finder){ parentMoreInfoSlider.appendChild(moreInfoNodeSlider); + // X to close slider + + const closeButton = document.querySelector(".close"); + closeButton.addEventListener("click", event => { + toggleSliderClose(); + }); + } diff --git a/style.css b/style.css index 970aa5f9..8023c427 100644 --- a/style.css +++ b/style.css @@ -31,6 +31,11 @@ a{ text-decoration: none; } + + a:visited { + text-decoration: none; + + } ul { list-style-type: none; @@ -150,13 +155,21 @@ box-shadow: 10px 10px 46px -1px rgba(0,0,0,0.5); width: 100vw; height: 100vh; background-color: white; - transition:bottom 2.5s; + transition:bottom 0.5s; margin-right:0px; opacity: 0.9; z-index: 2; } + .more__info__slider.expanded { + + bottom: 0; + + + } + + .more__info__slider img { width: 50%; height: 100%; @@ -218,21 +231,24 @@ box-shadow: 10px 10px 46px -1px rgba(0,0,0,0.5); } .more__info__slider { display:flex; + justify-content: center; padding-top: 5%; /* display:none; */ position: fixed; - bottom: -200px; - left: 100px; + bottom: -100%; + left: 0; width: 100vw; height: 100vh; background-color: white; - transition:bottom 2.5s; + transition:bottom 0.5s; margin-right:0px; opacity: 0.9; - + } + + .results{ display:flex; flex-wrap: wrap; @@ -240,8 +256,8 @@ box-shadow: 10px 10px 46px -1px rgba(0,0,0,0.5); } - results li { - + .results li { +padding: 50px; } @@ -250,8 +266,49 @@ box-shadow: 10px 10px 46px -1px rgba(0,0,0,0.5); /* Large devices (desktops, 960px and up) */ @media (min-width: 960px) { + + h1 { + display:flex; + justify-content: center; + + margin-bottom: 10px; + margin-top:10px; + +} + +.oops{ +margin-top: 10%; +} + +.crying{ + width: 400px; + + +} +.crying img{ + margin-top: 10%; + width: 400px; + } +.mini__header { + display:flex; + flex-direction: row; + justify-content: space-between; + flex:1; +} +.more__info__list { +display:flex; +/* align-items: flex-start; */ +/* flex-direction: column; */ +} + +.more__info__slider{ + display:flex; +} + + + /* Extra large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) {