🎬 Movie Search App

body { background-color: #000; color: #0f0; font-family: Arial, sans-serif; margin: 0; padding: 0; } .app { max-width: 800px; margin: auto; padding: 2rem; text-align: center; } input { padding: 10px; width: 60%; font-size: 16px; border: none; border-radius: 4px; } button { padding: 10px 15px; background-color: #0f0; color: black; border: none; border-radius: 4px; margin-left: 10px; cursor: pointer; } #moviesContainer { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 2rem; } .movie { background-color: #111; border: 1px solid #0f0; border-radius: 8px; margin: 10px; width: 200px; padding: 1rem; color: white; } .movie img { width: 100%; height: auto; border-radius: 4px; } const apiKey = '3fc539f6'; // Replace with your real API key async function searchMovie() { const query = document.getElementById('searchInput').value; const url = `https://www.omdbapi.com/?s=${encodeURIComponent(query)}&apikey=${apiKey}`; const res = await fetch(url); const data = await res.json(); const container = document.getElementById('moviesContainer'); container.innerHTML = ''; if (data.Response === "True") { data.Search.forEach(movie => { const div = document.createElement('div'); div.classList.add('movie'); div.innerHTML = `

${movie.Title}

${movie.Year}

`; container.appendChild(div); }); } else { container.innerHTML = `

No results found.

`; } }