diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..ffcdb03 --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +.env +.env.local +.env.development.local +.env.test.local \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..6796fe9 --- /dev/null +++ b/index.html @@ -0,0 +1,32 @@ + + + + + + + + + + Movie Guide + + +
+
+ + +
+
+
+ + + + + diff --git a/key.js b/key.js new file mode 100644 index 0000000..a9fc693 --- /dev/null +++ b/key.js @@ -0,0 +1,3 @@ +// Enter you API Key here + +key = "51c2ef49"; diff --git a/main.js b/main.js new file mode 100644 index 0000000..4053e42 --- /dev/null +++ b/main.js @@ -0,0 +1,72 @@ +let movieNameRef = document.getElementById("movie-name"); +let searchBtn = document.getElementById("search-btn"); +let result = document.getElementById("result"); + +//function to fetch data from api + +let getMovie = () => { + let movieName = movieNameRef.value; + console.log("movieName", movieName); + let url = `http://www.omdbapi.com/?t=${movieName}&apikey=${key}`; + console.log("url", url); + //if input field is empty + + if (movieName.length <= 0) { + result.innerHTML = `

Please enter a movie name

`; + } + + //if input isn't empty + else { + fetch(url) + .then((resp) => resp.json()) + .then((data) => { + //if movie exist in database + if (data.Response == "True") { + result.innerHTML = ` +
+ +
+

${data.Title}

+
+ +

${data.imdbRating}

+
+
+ ${data.Rated} + ${data.Year} + ${data.Runtime} +
+
+
${data.Genre.split(",").join( + "
" + )}
+
+
+
+

Plot:

+

${data.Plot}

+

Cast:

+

${data.Actors}

+ `; + } + + //if movie doesn't exist in database + else { + result.innerHTML = `

${data.Error}

`; + } + }) + //if error occurs + .catch(() => { + result.innerHTML = `

Error Occured

`; + }); + } +}; + +console.log("movieName", movieName.length); +if (movieName.length > 0) { + getMovie(); +} + +movieNameRef.addEventListener("input", getMovie); +searchBtn.addEventListener("click", getMovie); +window.addEventListener("load", getMovie); diff --git a/star-icon.svg b/star-icon.svg new file mode 100644 index 0000000..bed7a2f --- /dev/null +++ b/star-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..fa15f72 --- /dev/null +++ b/style.css @@ -0,0 +1,149 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; +} + +body { + height: 100vh; + background: linear-gradient(#1c1917 50%, #0e34a0 50%); +} + +.container { + font-size: 16px; + width: 90vw; + max-width: 37.5em; + padding: 3em 1.8em; + background-color: #1e293b; + position: absolute; + transform: translate(-50%, -50%); + top: 50%; + left: 50%; + border-radius: 0.6em; + box-shadow: 1.2em 2em 3em rgba(0, 0, 0, 0.2); +} + +.search-container { + display: grid; + grid-template-columns: 9fr 3fr; + gap: 1.2em; +} + +.search-container input, +.search-container button { + font-size: 0.9em; + outline: none; + border-radius: 0.3em; +} + +.search-container input { + background-color: transparent; + border: 1px solid #a0a0a0; + color: #fff; + padding: 0.7em; +} +.search-container input:focus { + border-color: #fff; +} + +.search-container button { + background-color: #ffb92a; + border: none; + cursor: pointer; +} + +#result { + color: #fff; +} + +.info { + position: relative; + display: grid; + grid-template-columns: 4fr 8fr; + margin-top: 1.2em; +} + +.poster { + width: 100%; +} + +h2 { + text-align: center; + font-size: 1.5em; + font-weight: 600; + letter-spacing: 0.06em; +} + +.rating { + display: flex; + align-items: center; + justify-content: center; + gap: 0.6em; + margin: 0.6em 0 0.9em 0; +} + +.rating img { + width: 1.2em; +} + +.rating h4 { + display: inline-block; + font-size: 1.1em; + font-weight: 500; +} + +.details { + display: flex; + font-size: 0.95em; + gap: 1em; + justify-content: center; + color: #a0a0a0; + margin: 0.6em 0; + font-weight: 300; +} + +.genre { + display: flex; + justify-content: space-around; +} + +.genre div { + border: 1px solid #a0a0a0; + font-size: 0.75em; + padding: 0.4em 1.6em; + border-radius: 0.4em; + font-weight: 300; +} + +h3 { + font-weight: 500; + margin-top: 1.2em; +} + +p { + font-size: 0.9em; + font-weight: 300; + line-height: 1.8em; + text-align: justify; + color: #a0a0a0; +} + +.msg { + text-align: center; +} + +@media screen and (max-width: 600px) { + .container { + font-size: 14px; + } + .poster { + margin: auto; + width: auto; + max-height: 10.8em; + } + + .info { + grid-template-columns: 1fr; + } +}