diff --git a/index.html b/index.html new file mode 100644 index 00000000..6a91a7da --- /dev/null +++ b/index.html @@ -0,0 +1,39 @@ + + + + + + + Document + + + + + + +
+

Quelle film?

+
+ + +
+ + +
+
+ + + + + + + + + + + + + + diff --git a/script.js b/script.js new file mode 100644 index 00000000..8bc6b246 --- /dev/null +++ b/script.js @@ -0,0 +1,279 @@ +//HTML Element Targets +const parentSearchResult = document.querySelector(".results"); +const searchResultNode = document.createElement("li"); +const searchFunc = document.querySelector(".search__form"); + +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`; +parentSearchResult.appendChild(searchResultNode); + + +//Search Function + +//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); +}) + + +//Search result function / index of links/li's + +function IMDBData(search) { + // console.log(search.Search[4].Poster); + + search.Search.map((movies) => { + const searchResultNode = document.createElement("li"); + searchResultNode.innerHTML = + `
+

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

 + news image
`; + 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}]`); + filmSelector.addEventListener("click", event => { + 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); + toggleSliderOpen(); + }); + }); + } + + +//Not found movie text display + +function notFound(){ + const searchResultNodes = document.createElement("li") + searchResultNodes.innerHTML = + `
Oh dear we cant find that film + +
`; + parentSearchResult.appendChild(searchResultNodes); +}; + + +function notFoundTrailer() { +//TO DO +}; + + +//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){ + + fetch(url) + .then(function(response) { + + return response.json(); + }) + .then(function(search){ + + // If unknown result + if (search.Response === 'False') { + parentSearchResult.innerHTML = ""; + console.log(search) + notFound(); + } + else + { parentSearchResult.innerHTML = ""; + IMDBData(search); + + } + }); + +} + +//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 + + fetch(movieURL) + .then(function(response) { + + return response.json(); + }) + .then(function(finder){ + + // parentMoreInfo.innerHTML = ""; + + movieMore(finder); + // console.log(find); + }); + // .catch(function(error) { + // displayErrorToUser3(`${error} ahhhh server problem`); + // }); +} + +// 'More info - detail displayed on page + +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}`); + + // 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}
+ + `; + + 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 new file mode 100644 index 00000000..8023c427 --- /dev/null +++ b/style.css @@ -0,0 +1,318 @@ +* { + box-sizing: border-box; + margin:0; + padding:0; + } + + h1 { + display:flex; + justify-content: center; + justify-content: space-around; + margin-bottom: 10px; + margin-top:10px; + + + } + + 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; + background-repeat: repeat-x; + text-decoration: none; + } + + h2{ + font-size: 15px; + margin-left: 10px; + margin-bottom: 16px; + } + + a{ + text-decoration: none; + } + + a:visited { + 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 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%; + 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; +} + +.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) { + + + .trailer { + display: block + } + .more__info__slider { + display:flex; + justify-content: center; + padding-top: 5%; + + /* display:none; */ + position: fixed; + bottom: -100%; + left: 0; + width: 100vw; + height: 100vh; + background-color: white; + transition:bottom 0.5s; + margin-right:0px; + opacity: 0.9; + + } + + + + .results{ + display:flex; + flex-wrap: wrap; + flex-direction: row; + + } + + .results li { +padding: 50px; + } + + +} + +/* 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) { + +} + + +