From 4d12fa204fa560fa3fa4edf685488ab6c92de1e2 Mon Sep 17 00:00:00 2001 From: mathildepind Date: Thu, 1 Feb 2018 18:22:01 +0000 Subject: [PATCH 1/8] Initial commit --- fetch-movie.html | 10 +++++++ fetch-movie.js | 12 ++++++++ index.html | 73 ++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 10 +++++++ 4 files changed, 105 insertions(+) create mode 100644 fetch-movie.html create mode 100644 fetch-movie.js create mode 100644 index.html create mode 100644 style.css diff --git a/fetch-movie.html b/fetch-movie.html new file mode 100644 index 00000000..f33d7165 --- /dev/null +++ b/fetch-movie.html @@ -0,0 +1,10 @@ + + + + + Fetch movie + + + + + diff --git a/fetch-movie.js b/fetch-movie.js new file mode 100644 index 00000000..39deb476 --- /dev/null +++ b/fetch-movie.js @@ -0,0 +1,12 @@ +var searchString = 'jurassic'; +var searchUrl = 'http://www.omdbapi.com/?s=jurassic&apikey=25a585bd'; + +fetch(searchUrl) + .then(function(response) { + return response.json() + }).then(function(myJsonData) { + const resultArray = myJsonData.Search; + resultArray.forEach(result => console.log(result.Title)); + }).catch(function(error) { + + }); diff --git a/index.html b/index.html new file mode 100644 index 00000000..5ac742de --- /dev/null +++ b/index.html @@ -0,0 +1,73 @@ + + + + + + + + + + Movie Search Engine + + + +
+ +
+

Movie Search Engine

+
+ +
+
+

Home

+
+
+

Click here

+
+
+

Do something else

+
+
+ +
+
+

Part 1

+
+
+

Part 2

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

Totally functional search engine

+

This is where the search results will be shown

+
+
+ +
+
+

Something below

+
+
+

Another something

+
+
+

Last

+
+
+ +
+ + + diff --git a/style.css b/style.css new file mode 100644 index 00000000..9d298bf0 --- /dev/null +++ b/style.css @@ -0,0 +1,10 @@ +body { + margin: 60px; +} + +.header { + border: 1px solid black; + padding-left:5px; + padding-top:10px; + padding-bottom:10px; +} From b3f631a0355a5e800def55e2d60c5da69e7143c0 Mon Sep 17 00:00:00 2001 From: mathildepind Date: Sun, 4 Feb 2018 18:56:21 +0000 Subject: [PATCH 2/8] small change in html file --- fetch-movie.html | 2 +- fetch-movie.js | 45 ++++++++++++++++++++++++++++++++++++++++----- index.html | 20 ++++++++++---------- style.css | 5 +++++ 4 files changed, 56 insertions(+), 16 deletions(-) diff --git a/fetch-movie.html b/fetch-movie.html index f33d7165..d2cbc393 100644 --- a/fetch-movie.html +++ b/fetch-movie.html @@ -5,6 +5,6 @@ Fetch movie - + diff --git a/fetch-movie.js b/fetch-movie.js index 39deb476..9fe05cc5 100644 --- a/fetch-movie.js +++ b/fetch-movie.js @@ -1,12 +1,47 @@ -var searchString = 'jurassic'; -var searchUrl = 'http://www.omdbapi.com/?s=jurassic&apikey=25a585bd'; +//var searchString = 'jurassic'; +//var searchUrl = 'http://www.omdbapi.com/?s=star&apikey=25a585bd'; -fetch(searchUrl) +function listenForSubmit() { + var submitMovieSearch = document.querySelector('#submitButton'); + submitMovieSearch.addEventListener("click", function(event) { + event.preventDefault(); + var movieSearchText = document.querySelector('#searchForm').value; + //console.log(document.querySelector('#searchForm').value); + + function setUrl() { + var startUrl = 'http://www.omdbapi.com/?s='; + var midUrl = movieSearchText.replace(/\s/g, "+").toLowerCase(); + var endUrl = '&apikey=25a585bd'; + var searchUrl = startUrl+midUrl+endUrl; + console.log(searchUrl); + return searchUrlTest; + } + setUrl(); + }); + } + +listenForSubmit(); + +/* +function setUrl() { + var startUrl = 'http://www.omdbapi.com/?s='; + var midUrl = document.querySelector('#searchForm').value; + var endUrl = '&apikey=25a585bd'; + var searchUrlTest = startUrl+midUrl+endUrl; + console.log(searchUrlTest); + //return searchUrlTest; +} + +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; + });*/ diff --git a/index.html b/index.html index 5ac742de..75bda084 100644 --- a/index.html +++ b/index.html @@ -30,18 +30,15 @@

Movie Search Engine

-
-

Part 1

-
-
-

Part 2

+ +
-
- - +
+ +
- +
@@ -52,6 +49,9 @@

Movie Search Engine

Totally functional search engine

This is where the search results will be shown

+
+ +
@@ -68,6 +68,6 @@

Totally functional search engine

- + diff --git a/style.css b/style.css index 9d298bf0..0148fc41 100644 --- a/style.css +++ b/style.css @@ -8,3 +8,8 @@ body { padding-top:10px; padding-bottom:10px; } + +.btn { + border-radius: 8px; + padding: 12px 28px; +} From e9f19f635acd0ae0e50bdfe916ebe57d20cc9fdc Mon Sep 17 00:00:00 2001 From: mathildepind Date: Sun, 4 Feb 2018 21:41:00 +0000 Subject: [PATCH 3/8] eventListener and .fetch works now --- fetch-movie.js | 69 ++++++++++++++++++++++---------------------------- index.html | 2 ++ 2 files changed, 32 insertions(+), 39 deletions(-) diff --git a/fetch-movie.js b/fetch-movie.js index 9fe05cc5..c6162106 100644 --- a/fetch-movie.js +++ b/fetch-movie.js @@ -1,47 +1,38 @@ -//var searchString = 'jurassic'; -//var searchUrl = 'http://www.omdbapi.com/?s=star&apikey=25a585bd'; +var displayMovies = document.getElementById('container2'); +displayMovies.innerHTML = ' '; function listenForSubmit() { - var submitMovieSearch = document.querySelector('#submitButton'); - submitMovieSearch.addEventListener("click", function(event) { + var submitMovieSearch = document.querySelector('#submitButton'); + submitMovieSearch.addEventListener("click", function(event) { event.preventDefault(); - var movieSearchText = document.querySelector('#searchForm').value; - //console.log(document.querySelector('#searchForm').value); - - function setUrl() { - var startUrl = 'http://www.omdbapi.com/?s='; - var midUrl = movieSearchText.replace(/\s/g, "+").toLowerCase(); - var endUrl = '&apikey=25a585bd'; - var searchUrl = startUrl+midUrl+endUrl; - console.log(searchUrl); - return searchUrlTest; - } - setUrl(); - }); - } + var inputText = document.querySelector('#searchForm').value; + var inputMovie = inputText.replace(/\s/g, "+").toLowerCase(); + console.log(inputMovie); + findAllTheMovies(inputMovie); + }); +} listenForSubmit(); -/* -function setUrl() { - var startUrl = 'http://www.omdbapi.com/?s='; - var midUrl = document.querySelector('#searchForm').value; - var endUrl = '&apikey=25a585bd'; - var searchUrlTest = startUrl+midUrl+endUrl; - console.log(searchUrlTest); - //return searchUrlTest; +function showSearchResults(resultArray) { + resultArray.forEach(function(result) { + var showMovieTitle = document.createElement('h3'); + showMovieTitle.innerHTML = result.Title + ', ' + result.Year; + displayMovies.appendChild(showMovieTitle); + }); } -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; - });*/ +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 index 75bda084..85187339 100644 --- a/index.html +++ b/index.html @@ -44,7 +44,9 @@

Movie Search Engine

+
+

Totally functional search engine

From 9c730e9801a3e2389b68d99c26ce4dc3929f5c6f Mon Sep 17 00:00:00 2001 From: mathildepind Date: Sun, 4 Feb 2018 21:45:47 +0000 Subject: [PATCH 4/8] showing posters --- fetch-movie.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/fetch-movie.js b/fetch-movie.js index c6162106..ed902003 100644 --- a/fetch-movie.js +++ b/fetch-movie.js @@ -19,6 +19,9 @@ function showSearchResults(resultArray) { var showMovieTitle = document.createElement('h3'); showMovieTitle.innerHTML = result.Title + ', ' + result.Year; displayMovies.appendChild(showMovieTitle); + var showMoviePoster = document.createElement('img'); + showMoviePoster.src = result.Poster; + displayMovies.appendChild(showMoviePoster); }); } From 50a50a4683c6331a938110975f9c28425fe63ed9 Mon Sep 17 00:00:00 2001 From: mathildepind Date: Sun, 4 Feb 2018 21:55:21 +0000 Subject: [PATCH 5/8] clear resultArray before new submit --- fetch-movie.js | 1 + 1 file changed, 1 insertion(+) diff --git a/fetch-movie.js b/fetch-movie.js index ed902003..e758731a 100644 --- a/fetch-movie.js +++ b/fetch-movie.js @@ -15,6 +15,7 @@ function listenForSubmit() { listenForSubmit(); function showSearchResults(resultArray) { + displayMovies.innerHTML = ' '; resultArray.forEach(function(result) { var showMovieTitle = document.createElement('h3'); showMovieTitle.innerHTML = result.Title + ', ' + result.Year; From 32179f33c331c77a040bee12a3dede1a09cefe47 Mon Sep 17 00:00:00 2001 From: mathildepind Date: Tue, 6 Feb 2018 10:16:08 +0000 Subject: [PATCH 6/8] finding and displaying results --- fetch-movie.js | 2 +- index.html | 15 +++++++-------- style.css | 11 +++++++++++ test-fetch.js | 38 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 57 insertions(+), 9 deletions(-) create mode 100644 test-fetch.js diff --git a/fetch-movie.js b/fetch-movie.js index e758731a..3d1078cf 100644 --- a/fetch-movie.js +++ b/fetch-movie.js @@ -1,4 +1,4 @@ -var displayMovies = document.getElementById('container2'); +var displayMovies = document.getElementById('showResultsContainer'); displayMovies.innerHTML = ' '; function listenForSubmit() { diff --git a/index.html b/index.html index 85187339..ef13cc96 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ - + Movie Search Engine @@ -22,10 +22,10 @@

Movie Search Engine

Home

-

Click here

+
-

Do something else

+
@@ -44,13 +44,12 @@

Movie Search Engine

-
+

Totally functional search engine

-

This is where the search results will be shown

@@ -59,13 +58,13 @@

Totally functional search engine

-

Something below

+
-

Another something

+
-

Last

+
diff --git a/style.css b/style.css index 0148fc41..ca4ca684 100644 --- a/style.css +++ b/style.css @@ -7,9 +7,20 @@ body { 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..c6162106 --- /dev/null +++ b/test-fetch.js @@ -0,0 +1,38 @@ +var displayMovies = document.getElementById('container2'); +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; + }); +} From 7ec7c5d5d6293a4bf0216e15394c13724f2749fe Mon Sep 17 00:00:00 2001 From: mathildepind Date: Tue, 6 Feb 2018 10:25:07 +0000 Subject: [PATCH 7/8] deleted test file --- fetch-movie.html | 10 ------ index.html | 2 +- test-fetch.js | 86 +++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 86 insertions(+), 12 deletions(-) delete mode 100644 fetch-movie.html diff --git a/fetch-movie.html b/fetch-movie.html deleted file mode 100644 index d2cbc393..00000000 --- a/fetch-movie.html +++ /dev/null @@ -1,10 +0,0 @@ - - - - - Fetch movie - - - - - diff --git a/index.html b/index.html index ef13cc96..e367971c 100644 --- a/index.html +++ b/index.html @@ -25,7 +25,7 @@

Movie Search Engine

- +
diff --git a/test-fetch.js b/test-fetch.js index c6162106..801e1a53 100644 --- a/test-fetch.js +++ b/test-fetch.js @@ -1,4 +1,4 @@ -var displayMovies = document.getElementById('container2'); +var displayMovies = document.getElementById('showResultsContainer'); displayMovies.innerHTML = ' '; function listenForSubmit() { @@ -36,3 +36,87 @@ function findAllTheMovies(movie) { 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; + });*/ From d5265eac0f144c0af4aff1a5c1306e31519bef0c Mon Sep 17 00:00:00 2001 From: mathildepind Date: Tue, 6 Feb 2018 11:15:40 +0000 Subject: [PATCH 8/8] cleaned up code --- fetch-movie.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/fetch-movie.js b/fetch-movie.js index 3d1078cf..4b3c6bde 100644 --- a/fetch-movie.js +++ b/fetch-movie.js @@ -1,12 +1,12 @@ -var displayMovies = document.getElementById('showResultsContainer'); +let displayMovies = document.getElementById('showResultsContainer'); displayMovies.innerHTML = ' '; function listenForSubmit() { - var submitMovieSearch = document.querySelector('#submitButton'); + let submitMovieSearch = document.querySelector('#submitButton'); submitMovieSearch.addEventListener("click", function(event) { event.preventDefault(); - var inputText = document.querySelector('#searchForm').value; - var inputMovie = inputText.replace(/\s/g, "+").toLowerCase(); + let inputText = document.querySelector('#searchForm').value; + let inputMovie = inputText.replace(/\s/g, "+").toLowerCase(); console.log(inputMovie); findAllTheMovies(inputMovie); }); @@ -17,10 +17,10 @@ listenForSubmit(); function showSearchResults(resultArray) { displayMovies.innerHTML = ' '; resultArray.forEach(function(result) { - var showMovieTitle = document.createElement('h3'); + let showMovieTitle = document.createElement('h3'); showMovieTitle.innerHTML = result.Title + ', ' + result.Year; displayMovies.appendChild(showMovieTitle); - var showMoviePoster = document.createElement('img'); + let showMoviePoster = document.createElement('img'); showMoviePoster.src = result.Poster; displayMovies.appendChild(showMoviePoster); });