diff --git a/fetch-movie.js b/fetch-movie.js new file mode 100644 index 00000000..4b3c6bde --- /dev/null +++ b/fetch-movie.js @@ -0,0 +1,42 @@ +let displayMovies = document.getElementById('showResultsContainer'); +displayMovies.innerHTML = ' '; + +function listenForSubmit() { + let submitMovieSearch = document.querySelector('#submitButton'); + submitMovieSearch.addEventListener("click", function(event) { + event.preventDefault(); + let inputText = document.querySelector('#searchForm').value; + let inputMovie = inputText.replace(/\s/g, "+").toLowerCase(); + console.log(inputMovie); + findAllTheMovies(inputMovie); + }); +} + +listenForSubmit(); + +function showSearchResults(resultArray) { + displayMovies.innerHTML = ' '; + resultArray.forEach(function(result) { + let showMovieTitle = document.createElement('h3'); + showMovieTitle.innerHTML = result.Title + ', ' + result.Year; + displayMovies.appendChild(showMovieTitle); + let showMoviePoster = document.createElement('img'); + showMoviePoster.src = result.Poster; + displayMovies.appendChild(showMoviePoster); + }); +} + +function findAllTheMovies(movie) { + fetch(`http://www.omdbapi.com/?s=${movie}&apikey=25a585bd`) + .then(function(response) { + return response.json() + debugger; + }).then(function(myJsonData) { + const resultArray = myJsonData.Search; + resultArray.forEach(result => console.log(result.Title)); + showSearchResults(resultArray); + debugger; + }).catch(function(error) { + debugger; + }); +} diff --git a/index.html b/index.html new file mode 100644 index 00000000..e367971c --- /dev/null +++ b/index.html @@ -0,0 +1,74 @@ + + + + + + + + + + Movie Search Engine + + + +
+ +
+

Movie Search Engine

+
+ +
+
+

Home

+
+
+ +
+
+ +
+
+ +
+ +
+
+
+
+ + +
+ +
+
+ +
+
+
+ +
+
+
+

Totally functional search engine

+
+ +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ + + diff --git a/style.css b/style.css new file mode 100644 index 00000000..ca4ca684 --- /dev/null +++ b/style.css @@ -0,0 +1,26 @@ +body { + margin: 60px; +} + +.header { + border: 1px solid black; + padding-left:5px; + padding-top:10px; + padding-bottom:10px; + text-align: center; +} + +p { + font-family: 'Lato', sans-serif, monospace; + font-size: 12px; +} + +.btn { + border-radius: 8px; + padding: 12px 28px; +} + +.row { + margin-top: 20px; + margin-bottom: 20px; +} diff --git a/test-fetch.js b/test-fetch.js new file mode 100644 index 00000000..801e1a53 --- /dev/null +++ b/test-fetch.js @@ -0,0 +1,122 @@ +var displayMovies = document.getElementById('showResultsContainer'); +displayMovies.innerHTML = ' '; + +function listenForSubmit() { + var submitMovieSearch = document.querySelector('#submitButton'); + submitMovieSearch.addEventListener("click", function(event) { + event.preventDefault(); + var inputText = document.querySelector('#searchForm').value; + var inputMovie = inputText.replace(/\s/g, "+").toLowerCase(); + console.log(inputMovie); + findAllTheMovies(inputMovie); + }); +} + +listenForSubmit(); + +function showSearchResults(resultArray) { + resultArray.forEach(function(result) { + var showMovieTitle = document.createElement('h3'); + showMovieTitle.innerHTML = result.Title + ', ' + result.Year; + displayMovies.appendChild(showMovieTitle); + }); +} + +function findAllTheMovies(movie) { + fetch(`http://www.omdbapi.com/?s=${movie}&apikey=25a585bd`) + .then(function(response) { + return response.json() + debugger; + }).then(function(myJsonData) { + const resultArray = myJsonData.Search; + resultArray.forEach(result => console.log(result.Title)); + showSearchResults(resultArray); + debugger; + }).catch(function(error) { + debugger; + }); +} + + + +/* + +//var searchString = 'jurassic'; +//var searchUrl = 'http://www.omdbapi.com/?s=star&apikey=25a585bd'; + +var displayMovies = document.getElementById('showResults'); + + +function findAllTheMovies(movie) { + document.querySelector("#showResults").innerHTML=' '; + //var searchUrl = setUrl(movie); + //console.log(searchUrl); + fetch(`http://www.omdabpi.com/?=${movie}&apikey=25a585bd`) + //fetch(searchUrl) + .then(function(response) { + return response.json() + //debugger; + }).then(function(myJsonData) { + const resultArray = myJsonData.Search; + console.log(resultArray); + //debugger; + resultArray.forEach(result => console.log(result.Title)); + //showSearchResult(resultArray); + }).catch(function(error) { + debugger; + }); +} + +function listenForSubmit() { + var submitMovieSearch = document.querySelector('#submitButton'); + submitMovieSearch.addEventListener("click", function(event) { + event.preventDefault(); + var inputText = document.querySelector('#searchForm').value; + var inputMovie = inputText.replace(/\s/g, "+").toLowerCase(); + + console.log(inputMovie); + + findAllTheMovies(inputMovie); + }); +} + +listenForSubmit(); + + +function showSearchResult(resultArray) { + resultArray.forEach(function(result) { + console.log(result.Title); + var showMovieTitle = document.createElement("h3"); + showMovieTitle.innerHTML = result.Title; + displayMovies.appendChild(showMovieTitle); + }); +} + +listenForSubmit(); +//findAllTheMovies(); +//showSearchResult(); + +function setUrl(inputMovie) { + //var inputMovie = inputText.replace(/\s/g, "+").toLowerCase(); + var searchUrl = `http://www.omdabpi.com/?=${inputMovie}&apikey=25a585bd`; + //console.log(searchUrl); + return searchUrl; +} + +//setUrl();*/ + + + + + +/*fetch(searchUrl) + .then(function(response) { + return response.json() + debugger; + }).then(function(myJsonData) { + const resultArray = myJsonData.Search; + debugger; + resultArray.forEach(result => console.log(result.Title)); + }).catch(function(error) { + debugger; + });*/