apna-college · rkpp4 · Apr 5, 2026 · Apr 5, 2026
diff --git a/Boyd Stevens/README.md 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
diff --git a/Boyd Stevens/index.html b/Boyd Stevens/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Movie Search Application</title>
+    <link rel="stylesheet" href="styles.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Iosevka+Charon:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
+</head>
+<body>
+    <h1>Search About The Movie</h1>
+
+    <div class="search-container">
+        <input type="text" placeholder="Search any movie">
+        <button>Search</button>
+    </div>
+
+    <div class="movies-container">
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Boyd Stevens/script.js 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.length;i++){
+
+            let imdbID = data.Search[i].imdbID;
+
+            movies.innerHTML += `
+
+            <div class="movie" onclick="window.open('https://www.imdb.com/title/${imdbID}')";>
+
+                <div class="image-container">
+                    <img src="${data.Search[i].Poster}">
+                </div>
+                <div class="movie-details">
+                    <h3 class="title">${data.Search[i].Title}</h3>
+                    <p class="year">Released on : ${data.Search[i].Year}</p>
+                    <p class="type">Movie Type : ${data.Search[i].Type}</p>
+                </div>
+            </div>
+
+            `;
+        }
+    }
+    catch(e){
+        movies.innerHTML="Something Went Wrong";
+    }
+}
+search.addEventListener('click', getMovie);
+
+document.addEventListener('keypress', function(event){
+    if(event.key === "Enter"){
+        getMovie();
+    }
+})
diff --git a/Boyd Stevens/styles.css 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;
+}