diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..9a9fd3cf Binary files /dev/null and b/.DS_Store differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..4b7c2716 --- /dev/null +++ b/index.html @@ -0,0 +1,33 @@ + + + + + + + + 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; +}