JavaScript Capstone Project – Weather Application

Welcome to the final lesson of the JavaScript module.

In this capstone project, you will build a real-world Weather Application using JavaScript. This project combines everything you learned throughout the course.

Why a Weather Application?

A weather app is a strong final project because it represents how JavaScript is used in real products.

• Uses real external APIs
• Works with async programming
• Updates the UI dynamically
• Handles user input and errors

Project Overview

The application will:

• Accept a city name from the user
• Fetch live weather data
• Display temperature and condition
• Handle invalid input gracefully

Project Structure

• HTML – Input and display layout
• CSS – Basic styling
• JavaScript – Logic and API integration

Step 1: HTML Structure

<div class="weather-app">
  <h2>Weather App</h2>

  <input
    type="text"
    id="cityInput"
    placeholder="Enter city name">

  <button onclick="getWeather()">
    Get Weather
  </button>

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

This creates a simple interface where the user can enter a city and see the results.

Step 2: Basic Styling (CSS)

.weather-app {
  max-width: 420px;
  margin: 40px auto;
  text-align: center;
}

.weather-app input {
  width: 80%;
  padding: 10px;
  margin-bottom: 12px;
}

.weather-app button {
  padding: 10px 20px;
  cursor: pointer;
}

The goal here is clarity, not complex design.

Step 3: JavaScript Logic

async function getWeather() {
  const city =
    document.getElementById("cityInput").value;
  const result =
    document.getElementById("result");

  if (!city) {
    result.innerText =
      "Please enter a city name.";
    return;
  }

  try {
    const response = await fetch(
      `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=YOUR_API_KEY`
    );

    if (!response.ok) {
      throw new Error("City not found");
    }

    const data = await response.json();

    result.innerHTML = `
      
${data.name}
      
Temperature: ${data.main.temp} °C
      
Condition: ${data.weather[0].description}
    `;
  } catch (error) {
    result.innerText =
      "Unable to fetch weather data.";
  }
}

Replace YOUR_API_KEY with your OpenWeather API key.

JavaScript Concepts Used

• Variables and functions
• DOM manipulation
• Async / Await
• API integration
• Error handling

Other Project Ideas (Practice)

After completing this project, try building:

• To-do list with local storage
• User dashboard with API data
• Simple expense tracker
• Product listing with filters

These projects will strengthen your real-world confidence.

Evaluation Checklist

• Does the app fetch data correctly?
• Is the UI readable and simple?
• Are errors handled properly?
• Is the code easy to understand?

Final Words

Finishing a course is important, but real growth comes from building projects.

Keep practicing, keep building, and keep pushing your skills forward.