Movie Search App using JS Async/Await
In this tutorial, we will learn how to create a simple movie search app using JavaScript async/await . We will use the OMDB API to fetch the movie data. The app will have a search bar where the user can enter the movie name and the app will display the movie details. We will also add a feature to display the movie trailer on YouTube. We will use async/await to handl the API calls and make the app more responsive.vWe will also use the DOM to update the UI. We will also use the event listener to handle the user input.
1. Live Movie Search via OMDB API
Users can search for any movie by title.
Uses fetch() and async/await to get real-time data from the OMDB API.
2. Poster, Title, and Year Display
Each search result shows High-quality poster, Movie title and Release year
Placeholder image used if no poster is available.
3. Watch Trailer Button (YouTube Integration)
Every movie card includes a "Watch Trailer" button.
Opens a new tab with YouTube search results for the trailer.
4. Error Handling & Input Validation
Handles empty search input with a helpful message.
Displays “No results found” if the API doesn't return matches.
Catches and logs network or API errors gracefully.
Code - Movie Search App
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Movie Search App</title>
<style>
body {
margin: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #121212;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem;
}
h1 {
color: #00bcd4;
}
#search-box {
margin-bottom: 1rem;
display: flex;
gap: 0.5rem;
}
input[type="text"] {
padding: 0.5rem;
font-size: 1rem;
width: 250px;
border-radius: 4px;
border: none;
}
button {
padding: 0.5rem 1rem;
background-color: #00bcd4;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
#results {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
width: 100%;
max-width: 1000px;
margin-top: 2rem;
}
.movie {
background-color: #1e1e1e;
padding: 1rem;
border-radius: 8px;
text-align: center;
transition: transform 0.3s ease;
}
.movie:hover {
transform: scale(1.05);
}
.movie img {
width: 100%;
border-radius: 8px;
max-height: 300px;
object-fit: cover;
}
.movie h3 {
margin: 0.5rem 0 0.2rem;
}
.movie p {
margin: 0;
font-size: 0.9rem;
color: #aaa;
}
</style>
</head>
<body>
<h1 style="text-decoration: none;"><a href="/index12.html">Movie Search App</a></h1>
<div id="search-box">
<input type="text" id="searchInput" placeholder="Enter movie name..." />
<button onclick="searchMovie()">Search</button>
</div>
<div id="results"></div>
<script>
const API_KEY = 'Your Actual API Key'; // Replace this with your actual key
async function searchMovie() {
const query = document.getElementById('searchInput').value.trim();
const resultsDiv = document.getElementById('results');
resultsDiv.innerHTML = '';
if (!query) {
resultsDiv.innerHTML = '<p>Please enter a movie name.</p>';
return;
}
try {
const response = await fetch(`https://www.omdbapi.com/?s=${query}&apikey=${API_KEY}`);
const data = await response.json();
if (data.Response === "False") {
resultsDiv.innerHTML = `<p>No results found for "${query}"</p>`;
return;
}
data.Search.forEach(movie => {
const movieDiv = document.createElement('div');
movieDiv.classList.add('movie');
movieDiv.innerHTML = `
<img src="${movie.Poster !== 'N/A' ? movie.Poster : 'https://via.placeholder.com/200x300?text=No+Image'}" alt="${movie.Title}" />
<h3>${movie.Title}</h3>
<p>Year: ${movie.Year}</p>
<a href="https://www.youtube.com/results?search_query=${encodeURIComponent(movie.Title + ' trailer')}" target="_blank">
<button style="margin-top: 0.5rem;">Watch Trailer</button>
</a>
`;
resultsDiv.appendChild(movieDiv);
});
} catch (error) {
resultsDiv.innerHTML = '<p>Error fetching data. Please try again later.</p>';
console.error(error);
}
}
</script>
</body>
</html>
Explanation:-
The searchMovie() function grabs the text from the input field:
Fetching Data from OMDB API uses fetch() with await to call the OMDB API:
If the API says Response: "False" it shows a “No results found” message. Otherwise, it loops through the results with .forEach().
For each movie, it creates a new :
Adds poster, title, year
Adds a “Watch Trailer” button that links to YouTube using the movie name
Wrapped in a try...catch block:
If the API fails or something goes wrong, it shows an error message.