diff --git a/index.css b/index.css new file mode 100644 index 00000000..8e5caf33 --- /dev/null +++ b/index.css @@ -0,0 +1,129 @@ +body { + background-color: crimson; + height: auto; + overflow-y: scroll; + position: relative; +} + +.background { + height: auto; +} + +.header { + position: fixed; + top: 0px; + z-index: 1; + right: 0; + left: 0; + background-color: crimson; +} + +#title { + margin: auto; + text-align: center; + padding-top: 30px; + font-family: 'Julius Sans One', sans-serif; + font-size: 75px; + font-weight: bold; + text-shadow: 4px 4px red; +} + +.moviereel { + width: 70px; + display: block; + margin-left: auto; + margin-right: auto; + margin-top: 20px; + border: none; + border-radius: 50%; + box-shadow: 4px 4px red; +} + +.form { + margin: auto; + margin-top: 30px; + text-align: center; + padding: 5px; +} + +.input { + width: 50%; + padding: 12px 20px; + margin: 8px 0; + border: 2px solid red; + border-radius: 5px; + box-shadow: 4px 4px red; +} + +.button { + background-color: white; /* Green */ + border: none; + border-radius: 5px; + color: red; + padding: 9.5px 18px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + font-family: 'Roboto', sans-serif; + box-shadow: 4px 4px red; +} + +.movieinfo { + display: flex; + margin-top: 100px; +} + +.moviecard { + margin: 20px; + margin-top: 250px; + width: 250px; + position: relative; + font-family: 'Roboto', sans-serif; +} + +.poster { + width: 250px; + height: 370px; + padding-bottom: 10px; +} + +.cardtext { + margin: auto; + padding: 10px; + text-align: center; + border-style: solid; + border-width: 1px; + border-color: white; + border-radius: 5px; + font-family: 'Roboto', sans-serif; + background-color: rgba(255,255,255, 0.5); + box-shadow: 5px 1px 1px red; +} + +.movieheading { + height: auto; +} + +.infocard { + text-align: center; + height: auto; + padding: 15px; + border-style: solid; + border-width: 1px; + border-color: white; + border-radius: 5px; + font-family: 'Roboto', sans-serif; + background-color: rgba(255,255,255, 0.5); + box-shadow: 5px 1px 1px red; +} + +.detailedinfo { + overflow-y: scroll; + margin: auto; + margin-top: 25px; + margin-bottom: 25px; + padding: 10px; + height: auto; + width: 600px; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..beb173c5 --- /dev/null +++ b/index.html @@ -0,0 +1,33 @@ + + + + + + + + Document + + + + + +
+
+

OPEN MOVIE DATABASE SEARCH

+ Movie Reel +
+ + +
+
+
+ +
+
+ +
+
+ + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 00000000..6f2d0185 --- /dev/null +++ b/index.js @@ -0,0 +1,100 @@ +const form = document.querySelector("#textinput"); +const input = document.querySelector("#placeholder"); +const movieInfo = document.querySelector("#movieinfo"); +const detailInfo = document.querySelector("#detailedinfo"); +// const movietitle = document.querySelector("#movieheading"); + +// Event Handler "Submit" ==> Returns Movie Results +function createUrl(input) { + const search = input.value.trim(); + return `http://www.omdbapi.com/?s=${search}&apikey=2c6457b6&`; +} + +function searchFilms(url) { + fetch(url) + .then(function(response) { + return response.json(); + }) + .then(function(data) { + console.log(data); + let html = data.Search.map(function(movie) { + return ` +
+ + + +
+

+ ${movie.Title} +

+

+ ${movie.Year} +

+
+
+ `; + }).join(""); + movieInfo.innerHTML = html; + input.value = ''; + input.focus(); + }) + .catch(function(error) { + console.log(error); + }); +} + +function submitForm(event) { + event.preventDefault(); + searchFilms(createUrl(input)); +} + +// Event Handler "Click" ==> Returns Specific Movie Detail +function createUrl2(title) { + return `http://www.omdbapi.com/?t=${title}&apikey=2c6457b6&`; +} + +function searchDetail(url2) { + fetch(url2) + .then(function(response) { + return response.json(); + }) + .then(function(data) { + console.log(data); + const html = ` +
+

${data.Plot}

+
+ `; + detailInfo.innerHTML = html; + detailInfo.style.visibility = 'visible'; + }) + .catch(function(error) { + console.log(error); + }); +} + +function getInfo(event) { + event.preventDefault(); + if (event.target.id === "movieheading") { + const title = event.target.innerText; + searchDetail(createUrl2(title)); + }; +} + +// Event Handler "Click" ==> Hides Specific Movie Detail +function removeInfo() { + if (document.getElementById("infocard")) { + detailInfo.style.visibility = 'hidden'; +// (Tried removieChild and detach(), this was the answer in the end... + line 69) + } +} + +// Scroll up on clicking the form +function scrollUp() { + window.scrollTo(0, 0); +} + +form.addEventListener("submit", submitForm); +movieInfo.addEventListener("click", getInfo); +form.addEventListener("click", removeInfo); +form.on("click", scrollUp()); diff --git a/moviereel.png b/moviereel.png new file mode 100644 index 00000000..0f79f843 Binary files /dev/null and b/moviereel.png differ