🎬 Movie / TV Series Search App

“I Searched for a Movie via an API… and Got a 404 Emotional Error”

I just wanted to search for a movie…
The API said: “You misunderstood me.” 😅

At some point while learning JavaScript, you realize this:
👉 Static data is boring.
👉 Real data = real world.

That’s exactly where this project steps in:
The user types a movie name → real movie data comes from an API.
And if it doesn’t come?
💔 404 emotional damage.

🎯 What’s the Goal of This Project?

In this project, we:

• Get a movie name from the user
• Send a request to an API
• Display the returned data on the screen
• If there’s no movie → we’re sad, but professionally 😄

In short:

Frontend + API + JavaScript logic

🧠 What Will We Learn in This Project?

✔ What fetch() is and what it actually does
✔ How to talk to an API
✔ Writing asynchronous code with async / await without losing your mind
✔ Error handling (try / catch)
✔ Answering the question: “What do we show the user if something goes wrong?”

🎥 The API We’ll Use (Example)

This project usually uses the OMDb API.

🎬 OMDb API → Movie & TV series data
(Title, year, poster, IMDb rating, etc.)

📌 The logic is what matters, not the API itself.
Today OMDb, tomorrow another API.
What you learn stays with you.

🖥️ Basic HTML Structure (Setting the Scene)

<input type="text" id="searchInput" placeholder="Type a movie name..." />
<button id="searchBtn">Search</button>

<div id="result"></div>

🧠 What’s happening here?

• The user types something
• Clicks the button
• Results appear inside the result div

🚀 JavaScript Time (Action Starts)

1️⃣ Catch the Button Click

const button = document.getElementById("searchBtn");

button.addEventListener("click", searchMovie);

🧠 What’s going on?

• When the button is clicked, searchMovie runs
• User: “Search”
• JS: “Okay, I’m on it.”

2️⃣ The Main Function: searchMovie

async function searchMovie() {
  const movieName = document.getElementById("searchInput").value;
  const resultDiv = document.getElementById("result");

  if (!movieName) {
    resultDiv.innerHTML = "Please type a movie name 🎬";
    return;
  }

  try {
    const response = await fetch(
      `https://www.omdbapi.com/?t=${movieName}&apikey=API_KEY`
    );

    const data = await response.json();

    if (data.Response === "False") {
      resultDiv.innerHTML = "Movie not found 😢";
      return;
    }

    resultDiv.innerHTML = `
      <h2>${data.Title}</h2>
      <p>Year: ${data.Year}</p>
      <p>IMDb: ${data.imdbRating}</p>
      <img src="${data.Poster}" alt="${data.Title}" />
    `;
  } catch (error) {
    resultDiv.innerHTML = "Something went wrong… 😵";
    console.error(error);
  }
}

🧠 Let’s Break Down the Logic

🔹 Why async / await?

Because:

• Data from an API doesn’t arrive instantly
• We don’t want JavaScript to freeze while waiting

👉 await means:
“Wait here until the data arrives… then continue.”

🔹 Why is try / catch important?

Because:

• The internet can go down
• The API can fail
• The user shouldn’t just stare at the screen in confusion

catch (error) {
  console.log("Life is hard sometimes...");
}

😄 Real-life simulation.

🔹 What’s with data.Response === "False"?

Some APIs:

• Return a successful HTTP response
• But say “I couldn’t find it” inside the data

⚠️ That’s why fetch() alone isn’t enough —
you must also check the returned data.

⚠️ Most Common Mistakes

🚫 Writing the API key incorrectly
🚫 Forgetting await
🚫 Forgetting response.json()
🚫 Not showing an error message
🚫 Not checking for empty input

💡 Small but Golden Tips

✨ Add a loading message (“Searching… 🎬”)
✨ Enable search with the Enter key
✨ Show a funny message if the movie isn’t found
✨ Color IMDb ratings dynamically
✨ Add a “Favorites” feature

🎬 Final Scene

This project gives you:

✅ Real API experience
✅ Asynchronous JavaScript mindset
✅ Error-handling habits
✅ The feeling of “I’m building real things with JS” 😎

If a developer can fetch data from an API…
they are no longer alone.