Add files via upload

princekaif · Sep 7, 2024 · 6d66a61 · 6d66a61
1 parent e6b4af2
commit 6d66a61
Show file tree

Hide file tree

Showing 5 changed files with 187 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Movie Guide</title>
+    <link rel="stylesheet" href="style.css">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+
+</head>
+<body>
+    <nav class="navbar navbar-expand-lg bg-light text-sucess">
+        <div class="container-fluid">
+          <a class="navbar-brand" href="#">Navbar</a>
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page" href="#">Home</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#">Link</a>
+              </li>
+              <li class="nav-item dropdown">
+                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                  Dropdown
+                </a>
+                <ul class="dropdown-menu">
+                  <li><a class="dropdown-item" href="#">Action</a></li>
+                  <li><a class="dropdown-item" href="#">Another action</a></li>
+                  <li><hr class="dropdown-divider"></li>
+                  <li><a class="dropdown-item" href="#">Something else here</a></li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link disabled">Disabled</a>
+              </li>
+            </ul>
+            <form class="d-flex" role="search">
+              <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+              <button class="btn btn-outline-success" type="submit">Search</button>
+            </form>
+          </div>
+        </div>
+      </nav>
+
+
+    <div class="container">
+        <h1>Movie Guide</h1>
+        <input type="text" id="movie-input"placeholder="Search For a Movie ...">
+        <button id="search-btn">Search</button>
+        <br><br>
+        <div id="movie-results"class="movie-container "></div>
+    </div>
+    <script src="script.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
+</body>
+</html>
diff --git a/mov.jpg b/mov.jpg
diff --git a/movie.webp b/movie.webp
diff --git a/script.js b/script.js
@@ -0,0 +1,46 @@
+const apiKey = 'd33ff701';
+
+const searchBtn = document.getElementById('search-btn');
+const movieInput = document.getElementById('movie-input');
+
+searchBtn.addEventListener('click', () => {
+    const movieTitle = movieInput.value;
+
+    fetch(`https://www.omdbapi.com/?s=${movieTitle}&apikey=${apiKey}`)
+    .then(response => response.json())
+    .then(data => {
+        const movieResult = document.getElementById('movie-results');
+        movieResult.innerHTML = '';  // Clear previous results
+
+        if (data.Search) {  // Check if data.Search exists
+            data.Search.forEach(movie => {
+                const movieDiv = document.createElement('div');
+                movieDiv.classList.add('movie');
+                movieDiv.innerHTML = `
+                    <img src="${movie.Poster}" alt="${movie.Title}">
+                    <h3>${movie.Title}</h3>
+                    <p>${movie.Year}</p>
+                    <button onclick="getMovieDetails('${movie.imdbID}')">More Info</button>
+                `;
+                movieResult.appendChild(movieDiv);
+            });
+        } else {
+            movieResult.innerHTML = `<p>No movies found.</p>`;
+        }
+    })
+    .catch(error => console.log('error', error));
+});
+function getMovieDetails(movieID) {
+    fetch(`https://www.omdbapi.com/?i=${movieID}&apikey=${apiKey}`)
+        .then(response => response.json())
+        .then(movie => {
+            // Display more detailed information about the movie
+            alert(`
+                Title: ${movie.Title}
+                Director: ${movie.Director}
+                Actors: ${movie.Actors}
+                Plot: ${movie.Plot}
+            `);
+        })
+        .catch(error => console.error('Error:', error));
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,81 @@
+body{
+    padding: 0;
+    margin: 0;
+    font-family: Arial, sans-serif;
+    background-color: rgb(242, 242, 248);
+    text-align: center;
+    background-image: url('mov.jpg');
+    color: red;
+}
+.container {
+   width: 100%;
+    margin: 20px auto;
+    padding: 20px;
+    text-align: center;
+    color: rgb(29, 22, 22);
+    background-color: #efe9e9;
+
+
+
+}
+
+input, button {
+    padding: 10px;
+    margin: 10px;
+    font-size: 16px;
+    justify-content: center;
+}
+.movie img {
+
+    border-radius: 5px;
+    transition: transform 0.3s ease;
+}
+
+.movie img:hover {
+    transform: scale(1.05);
+}
+
+button {
+    background-color: #007BFF;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+button:hover {
+    background-color: #0056b3;
+}
+
+.movie-container {
+    display: flex;
+    flex-wrap: wrap; /* Allows wrapping to the next line if too many movies */
+    justify-content: flex-start; /* Align items to the left */
+    gap: 20px; /* Spacing between the items */
+
+}
+
+.movie {
+    width: 240px;
+    text-align: center;
+
+}
+
+.movie img {
+    width: 100%;
+    height: auto;
+    border-radius: 8px;
+}
+
+.movie h3 {
+    font-size: 18px;
+    margin: 10px 0 5px 0;
+}
+
+.movie p {
+    font-size: 16px;
+    color: #777;
+}
+
+