diff --git a/Boyd Stevens/README.md b/Boyd Stevens/README.md new file mode 100644 index 00000000..f0701e82 --- /dev/null +++ b/Boyd Stevens/README.md @@ -0,0 +1,15 @@ +# Movie Search Application + +This is a basic movie search application built upon the OMDB API. When the user searches any movie like "Avengers", It will show the top 10 movies with the name 'Avengers' in it. + +When the user clicks on the specific movie, they will be redirected to the IMDB site where the movie details will be visible. + +# Technologies Used + +HTML +CSS +JS + +# API Used + +OMDB Api \ No newline at end of file diff --git a/Boyd Stevens/index.html b/Boyd Stevens/index.html new file mode 100644 index 00000000..966b063e --- /dev/null +++ b/Boyd Stevens/index.html @@ -0,0 +1,25 @@ + + + + + + Movie Search Application + + + + + + +

Search About The Movie

+ +
+ + +
+ +
+
+ + + + \ No newline at end of file diff --git a/Boyd Stevens/script.js b/Boyd Stevens/script.js new file mode 100644 index 00000000..32a3c10c --- /dev/null +++ b/Boyd Stevens/script.js @@ -0,0 +1,62 @@ +let movie = document.querySelector('input'); +let search = document.querySelector('button'); + +let title = document.querySelector('.title'); +let year = document.querySelector('.year'); +let type = document.querySelector('.type'); +let poster = document.querySelector('img'); + +let movies = document.querySelector('.movies-container'); + +async function getMovie(){ + try{ + let movieName = movie.value; + + if(movieName === ""){ + alert("Please enter movie name"); + return; + } + + let url = `https://www.omdbapi.com/?apikey=d36ffd1a&s=${movieName}`; + + let res = await fetch(url); + let data = await res.json(); + movies.innerHTML = ""; + + if(data.Response === "False"){ + alert("Movie not found"); + return; + } + + for(let i=0;i + +
+ +
+
+

${data.Search[i].Title}

+

Released on : ${data.Search[i].Year}

+

Movie Type : ${data.Search[i].Type}

+
+ + + `; + } + } + catch(e){ + movies.innerHTML="Something Went Wrong"; + } +} +search.addEventListener('click', getMovie); + +document.addEventListener('keypress', function(event){ + if(event.key === "Enter"){ + getMovie(); + } +}) \ No newline at end of file diff --git a/Boyd Stevens/styles.css b/Boyd Stevens/styles.css new file mode 100644 index 00000000..53738e74 --- /dev/null +++ b/Boyd Stevens/styles.css @@ -0,0 +1,72 @@ +*{ + margin : 0; + padding : 0; + font-family: "Iosevka Charon", monospace; +} +body{ + margin-top : 1.5rem; +} +h1{ + text-align : center; + margin-bottom : 1rem; +} +.search-container{ + text-align : center; +} +input{ + width : 40%; + height : 2.4rem; + border : 1px solid black; + border-radius : 8px; + padding-left : 1rem; + font-size : 1rem; +} +button{ + background-color : black; + color : white; + font-size : 1.1rem; + font-weight: bold; + border : 2px solid black; + padding : 6px 10px; + border-radius : 8px; + cursor : pointer +} +button:hover{ + opacity : 0.9; +} +button:active{ + opacity : 0.8; +} +.movies-container{ + display : flex; + padding : 2rem; + align-items : center; + gap : 1.5rem; + flex-wrap : wrap; +} +.movie{ + max-width : 220px; + min-height : 380px; + border-radius : 6px; + box-shadow : 3px 3px 5px rgba(0,0,0,0.4); + cursor : pointer; + transition : transform 0.3s ease; +} +.movie:hover{ + transform : translateY(-3px); +} +.movie-details{ + padding-left : 5px; + padding-top : 5px; +} +.image-container{ + max-width : 100%; + height : 250px; + overflow: hidden; + border-top-left-radius: 6px; + border-top-right-radius: 6px; +} +img{ + object-fit : cover; + object-position: bottom; +} \ No newline at end of file