thinkswell · PBJI · Oct 14, 2023 · Oct 13, 2023
diff --git a/MovieInfoApp/0kt1/README.md b/MovieInfoApp/0kt1/README.md
@@ -0,0 +1,25 @@
+# Movie Details Website
+
+A simple JavaScript web application to search for and display movie details.
+
+
+## Features
+
+- Enter a movie name and get details about the movie.
+- Uses the OMDB API to fetch movie data.
+- Responsive and user-friendly design.
+
+
+## Images
+
+
+- [Screenshots](images/Screenshot1.png)
+- [Screenshots](images/Screenshot2.png)
+- [Screenshots](images/Screenshot3.png)
+- [Screenshots](images/Screenshot4.png)
+
+
+
+
+
+
diff --git a/MovieInfoApp/0kt1/images/Screenshot1.png b/MovieInfoApp/0kt1/images/Screenshot1.png
diff --git a/MovieInfoApp/0kt1/images/Screenshot2.png b/MovieInfoApp/0kt1/images/Screenshot2.png
diff --git a/MovieInfoApp/0kt1/images/Screenshot3.png b/MovieInfoApp/0kt1/images/Screenshot3.png
diff --git a/MovieInfoApp/0kt1/images/Screenshot4.png b/MovieInfoApp/0kt1/images/Screenshot4.png
diff --git a/MovieInfoApp/0kt1/index.html b/MovieInfoApp/0kt1/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Movie Details</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Movie Details</h1>
+        <input type="text" id="movieInput" placeholder="Enter a movie name">
+        <button id="searchButton">Search</button>
+
+    </div>
+    <div id="movieDetails">
+        <!-- Movie details will be displayed here -->
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/MovieInfoApp/0kt1/script.js b/MovieInfoApp/0kt1/script.js
@@ -0,0 +1,43 @@
+const apiKey = '76d079f0'; // Get an API key from http://www.omdbapi.com/apikey.aspx
+
+const movieInput = document.getElementById('movieInput');
+const searchButton = document.getElementById('searchButton');
+const movieDetails = document.getElementById('movieDetails');
+
+searchButton.addEventListener('click', () => {
+    const movieName = movieInput.value.trim();
+
+    if (movieName !== '') {
+        fetch(`http://www.omdbapi.com/?t=${movieName}&apikey=${apiKey}`)
+            .then((response) => response.json())
+            .then((data) => {
+                if (data.Response === 'True') {
+                    // Display movie details
+                    movieDetails.innerHTML = `
+                        <div class = "float-container">
+                          <div class= "float-child">
+                            <img src="${data.Poster}" alt="${data.Title} poster">
+                          </div>
+                          <div class= "float-child">
+                            <h2>${data.Title}</h2>
+                            <h4 style="display: inline">Year:</h4> <p style="display: inline">${data.Year} </p><br>
+                            <h4 style="display: inline">Director:</h4> <p style="display: inline">${data.Director} </p><br>
+                            <h4 style="display: inline">Genre:</h4> <p style="display: inline">${data.Genre} </p><br>
+                            <h4 style="display: inline">Actors:</h4> <p style="display: inline">${data.Actors} </p><br>
+                            <h4 style="display: inline">PLot:</h4> <p style="display: inline">${data.Plot} </p><br>
+                          </div>
+                        </div>
+
+
+
+                    `;
+                } else {
+                    movieDetails.innerHTML = 'Movie not found.';
+                }
+            })
+            .catch((error) => {
+                console.error('Error fetching data:', error);
+                movieDetails.innerHTML = 'An error occurred while fetching data.';
+            });
+    }
+});
diff --git a/MovieInfoApp/0kt1/style.css b/MovieInfoApp/0kt1/style.css
@@ -0,0 +1,101 @@
+/* Reset some default styles */
+body, h1, p {
+    font-family: 'Poppins', Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+}
+
+h2{
+    color:#ffffff;
+    font-family: 'Poppins', Arial, sans-serif;
+}
+
+body {
+    /* font-family: Arial, sans-serif; */
+    background-color: #000000;
+    font-family: 'Poppins', Arial, sans-serif;
+}
+
+.container {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #1aa0c9;
+    background-image: linear-gradient(to top left, rgb(1, 14, 19), rgb(30, 41, 163));
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    text-align: center;
+}
+
+h1 {
+    font-size: 30px;
+    font-weight: 500;
+    margin-bottom: 20px;
+    color: #ffffff;
+}
+
+p{
+    color: #ffffff;
+}
+
+
+input[type="text"] {
+    font-family: 'Poppins', Arial, sans-serif;
+    width: 90%;
+    padding: 10px;
+    border: 1px solid #032b34;
+    border-radius: 24px;
+    font-size: 16px;
+    margin-bottom: 10px;
+    color: #ffffff;
+    background-color: #000000;
+}
+
+button {
+    font-family: 'Poppins', Arial, sans-serif;
+    background-color: #1db512;
+    color: #000000;
+    border: none;
+    border-radius: 4px;
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #000000;
+    color: #ffffff;
+}
+
+#movieDetails {
+    margin-top: 20px;
+    margin: auto;
+    text-align: center;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+    margin-top: 10px;
+    border-radius: 8px;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+}
+
+h4{
+    color: #158631;
+}
+
+.float-container {
+    border: 1px solid rgb(255, 255, 255);
+  margin: 1rem;
+  padding: 2rem 2rem;
+  text-align: center;
+}
+
+.float-child {
+    display: inline-block;
+  /* border: 1px solid red; */
+  padding: 1rem 1rem;
+  vertical-align: middle;
+  text-align: left;
+}