diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..5008ddfc Binary files /dev/null and b/.DS_Store differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..e5d93c5e --- /dev/null +++ b/index.html @@ -0,0 +1,24 @@ + + + + + + + + Document + + + + +
+
+ + + +
+
+
+ + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 00000000..17e569bd --- /dev/null +++ b/index.js @@ -0,0 +1,48 @@ +//this are my handles-variables to access html +const form = document.querySelector(".form"); +const text = document.querySelector(".userInput"); +const submit = document.querySelector(".submitButton"); +const movieDiv = document.querySelector("#results"); + +function parseMovies(movies) { + return movies + .map(function(movie) { + return ` +
+ +

${movie.Title}

+

Release year: ${movie.Year}

+ + +
+ `; + }) + .join(""); +} + +function getMovies(movie) { + text.value = ""; + movieDiv.innerHTML = ""; + + fetch(`http://www.omdbapi.com/?s=${movie}&apikey=b91b4611`) + .then(function(response) { + return response.json(); + }) + .then(function(data) { + movieDiv.innerHTML = parseMovies(data.Search); + }) + .catch(console.log); +} + +// adds a listener to the submit button +form.addEventListener("submit", function(event) { + event.preventDefault(); + const searchQueryValue = text.value; + getMovies(searchQueryValue); +}); + +/* +fetch('http movie DataBase'). +then (response convert to response.json)) +then (getData and display in HTML) +*/ diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..23b5e0d6 --- /dev/null +++ b/styles.css @@ -0,0 +1,3 @@ +.app { + background-color: lightpink; +} diff --git a/styling.html b/styling.html new file mode 100644 index 00000000..496b19dd --- /dev/null +++ b/styling.html @@ -0,0 +1,99 @@ + + + + + + + Document + + +
+
+ + + +
+
+
+ +

Italian Spiderman

+

Release year: 2007

+ + +
+ +
+ +

Superman, Spiderman or Batman

+

Release year: 2011

+ + +
+ +
+ +

Spiderman

+

Release year: 1990

+ + +
+ +
+ +

Spiderman

+

Release year: 2010

+ + +
+ +
+ +

Fighting, Flying and Driving: The Stunts of Spiderman 3

+

Release year: 2007

+ + +
+ +
+ +

Spiderman and Grandma

+

Release year: 2009

+ + +
+ +
+ +

The Amazing Spiderman T4 Premiere Special

+

Release year: 2012

+ + +
+ +
+ +

Amazing Spiderman Syndrome

+

Release year: 2012

+ + +
+ +
+ +

Hollywood's Master Storytellers: Spiderman Live

+

Release year: 2006

+ + +
+ +
+ +

Spiderman 5

+

Release year: 2008

+ + +
+
+
+ + \ No newline at end of file