Building a Weather Dashboard with API Integration

Step 1: Project Setup and API Key

To get real-time weather data, we need to use a service that provides it. We'll use the OpenWeatherMap API, which is free for basic use. To access it, you need a unique API key.

The first video below will guide you through the entire project. For now, let's focus on the setup.

After this step, you should have:

1. An index.html file with the form and a display card structure.
2. A styles.css file to make it look good.
3. A script.js file, which is currently empty.
4. Your personal API key from OpenWeatherMap. Save it somewhere safe; we'll need it soon.

Step 2: JavaScript - The Application Core

Now it's time to bring the application to life with JavaScript. Our script will be responsible for three main jobs:

1. Listening for the user to submit a city.
2. Fetching the data for that city from the OpenWeatherMap API.
3. Displaying either the weather data or an error message on the screen.

Let's continue with the video to wire up our UI and prepare the functions we'll need.

Step 3: Fetching the Weather Data

This is where your knowledge of async/await and error handling comes into play. We will now implement the function that communicates with the OpenWeatherMap API.

Notice how the logic here directly applies the error-handling pattern from our previous lesson. We use a try...catch block to handle network failures, and inside the try block, we explicitly check response.ok to catch HTTP errors (like a 404 "City not found").

At this point, you have the logic to fetch and parse the weather data. The next step is to display it.

Step 4: Displaying Data and Handling Errors

Once we have the weather data as a JSON object, we need to extract the relevant information and dynamically create HTML elements to show it to the user. We'll also implement the displayError function that we call from our catch block.

This is a great exercise in DOM manipulation. Instead of having static elements in our HTML, we'll create, configure, and append them using JavaScript. This makes our application flexible and robust.

After completing this step, your weather dashboard should be fully functional! Try searching for a city, searching for a nonsense name to see the error, and clicking "Get Weather" with no input.

// ...inside displayWeatherData function

const tempInCelsius = (temp - 273.15).toFixed(1);
tempDisplay.textContent = `${tempInCelsius}°C`;

// The rest of the code for adding classList and appending remains the same
tempDisplay.classList.add("tempDisplay");
card.appendChild(tempDisplay);

// ...

Conclusion

Congratulations! You have successfully built a complete, data-driven web application from scratch. You've integrated user input, asynchronous API calls, dynamic DOM manipulation, and robust error handling—all fundamental skills for a modern web developer.

Key Takeaways:

• You built a practical application by combining HTML, CSS, and JavaScript.
• You used fetch with async/await to consume data from a real-world, third-party API.
• You applied the graceful error handling pattern (try...catch with a !response.ok check) to create a reliable user experience.
• You practiced dynamic DOM manipulation by creating and appending elements based on API data.

This project marks the end of our deep dive into asynchronous JavaScript. You've learned the theory and immediately applied it to a tangible project.

In the next module, we will begin our journey into React. You've now seen how much work it can be to manipulate the DOM directly (createElement, appendChild, textContent, etc.). You'll soon discover how libraries like React provide a much more powerful, efficient, and structured way to build complex and interactive user interfaces.