From 3d1907a7109939ea462ed7aa19f40185f380e904 Mon Sep 17 00:00:00 2001 From: Rafal Date: Mon, 11 Jun 2018 13:43:22 +0100 Subject: [PATCH] Initial commit --- .DS_Store | Bin 0 -> 6148 bytes index.html | 33 ++++++++++++++++++++++++++ index.js | 68 +++++++++++++++++++++++++++++++++++++++++++++++++++++ main.css | 49 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 150 insertions(+) create mode 100644 .DS_Store create mode 100644 index.html create mode 100644 index.js create mode 100644 main.css diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..9a9fd3cf76cf93e9c95fcef6840e52c5882f7ed0 GIT binary patch literal 6148 zcmeH~zfQw25XQfQ4lOL*VDt-62?iFHP^AL{3%mfdLE=xKLqTH9>+qEDo$o+N8;K27 z=uWb~vwdeLKPj;dK&EfiF)#)&WKk7$dQ7`}hju)8K$SelJ0`ftE1psJOtg(%`s{mn zzzZteq4oS1^>Q(4gx_S2>cMx|3hL?EnFMZ z{Oe$quK-j%MrWh1$7Rh)u7zu3$`P7aD%DcOuNY$K>`xw7xHhJi4)M!}_{!gx7s;!0 z{*=QZg=y45AP95`>{@fI`~QreOz$PXn-Z-c5Cr}i0U4Cn<&-bwd+WyQ>0X;yZdlYb qu2F|ZzjFv+L;oX(dC + + + + + + + Movie Search Engine + + + +
+
+
+

search movie engine

+
+
+
+
+
+ + +
+
+
+

Your movies results:

+
    +
    +
    +
    + + + diff --git a/index.js b/index.js new file mode 100644 index 00000000..1cfbcc54 --- /dev/null +++ b/index.js @@ -0,0 +1,68 @@ +const film = document.querySelector('#find-movie'); +const input = document.querySelector("#name"); +const results = document.querySelector("#results"); + +function getMovies(movieName){ + console.log(movieName); + fetch(`http://www.omdbapi.com/?s=${movieName}&apikey=40ce55c`) + .then(function(response){ + return response.json(); + }) + .then(function(data){ + const html = data.Search.map(function(movie){ + return ` +
  • + + ${movie.Title} + ,Release Year:${movie.Year} + + + +
    +
    • + ` + }).join(''); + results.innerHTML = html; + }) + .catch(function(error){ + console.log(error); + }); +} + +function addMoreDetails(id, button){ + console.log(id); + fetch(`http://www.omdbapi.com/?i=${id}&apikey=40ce55c`) + .then(function(response){ + return response.json(); + }) + .then(function(movieInfo){ + // const details = data.Search.map(function(movieInfo){ + button.nextSibling.nextSibling.innerHTML = ` +
  • + Director:${movieInfo.Director}, + Actors: ${movieInfo.Actors}, + Country: ${movieInfo.Country}, + Runtimr:${movieInfo.Runtime}, + Awards: ${movieInfo.Awards} +
    • + ` + }) + .catch(function(error){ + console.log(error); + }); +} + +// Bind event handlers +film.addEventListener('submit', function(event){ + event.preventDefault(); + getMovies(input.value); +}); + +results.addEventListener('click', function(event){ + if(event.target.matches('[data-imdbID]')){ + addMoreDetails(event.target.dataset.imdbid, event.target) + } +}) + +// Debugging +// addMoreDetails("tt0372784")// test call÷ diff --git a/main.css b/main.css new file mode 100644 index 00000000..d4b38127 --- /dev/null +++ b/main.css @@ -0,0 +1,49 @@ +body { + text-align: center; + font-family: Impact; + background-image:url(https://i.imgur.com/GLIs5QU.jpg); + +}; + +header { + color:white; + font-size: 20px; + margin: 0.2em; + padding: 12 2%; + height: 10em; + text-transform: capitalize; +} + + +.container1 { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + color: white; +}; + + + +.text_1 { + display: flex; + justify-content: center; + list-style-type: none; +} + +.page-title { + font-size: 20px; + text-transform: capitalize; + background-color: : grey; +} + +#results { + list-style-type: none; + width:350px; + height:150px; + color:white; + display:inline-block; + justify-content: center; + flex-direction: column; + margin:15px; +}