Project 1 – Weather App

Duration: 2–3 hours

🎯 Project Goal

• Build a weather app where the user types a city name and sees current temperature, description, humidity, and wind speed.[web:649][web:656]
• Use the OpenWeatherMap API with JavaScript fetch() and async/await to load real data.[web:649][web:662]

📺 Project Video

Watch this step‑by‑step tutorial to see the full weather app built with HTML, CSS, JavaScript, and OpenWeatherMap API:

6.1.1 HTML Structure

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

  <form id="weather-form">
    <input
      id="city-input"
      type="text"
      placeholder="Enter city name"
      required
    />
    <button type="submit">Get Weather</button>
  </form>

  <section id="weather-result" class="weather-result hidden">
    <h3 id="city-name"></h3>
    <p id="temp"></p>
    <p id="description"></p>
    <p id="extra"></p>
  </section>

  <p id="weather-error" class="error-message"></p>
</main>

6.1.2 Basic Styling (CSS)

.weather-app {
  max-width: 420px;
  margin: 40px auto;
  padding: 24px;
  border-radius: 16px;
  background: linear-gradient(135deg, #2563eb, #60a5fa);
  color: #ffffff;
  font-family: system-ui, sans-serif;
  text-align: center;
}

#weather-form {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

#city-input {
  flex: 1;
  padding: 8px;
  border-radius: 999px;
  border: none;
}

#weather-form button {
  padding: 8px 14px;
  border-radius: 999px;
  border: none;
  background-color: #0f172a;
  color: #ffffff;
  cursor: pointer;
}

.weather-result.hidden {
  display: none;
}

.error-message {
  margin-top: 8px;
  color: #fee2e2;
  font-size: 0.9rem;
}

6.1.3 JavaScript: Fetching from OpenWeatherMap

Sign up at OpenWeatherMap and get a free API key, then replace YOUR_API_KEY below.[web:662][web:649]

<script>
  const form = document.getElementById("weather-form");
  const cityInput = document.getElementById("city-input");
  const resultSection = document.getElementById("weather-result");
  const cityNameEl = document.getElementById("city-name");
  const tempEl = document.getElementById("temp");
  const descEl = document.getElementById("description");
  const extraEl = document.getElementById("extra");
  const errorEl = document.getElementById("weather-error");

  const API_KEY = "YOUR_API_KEY"; // replace with your OpenWeatherMap key
  const BASE_URL = "https://api.openweathermap.org/data/2.5/weather";

  async function fetchWeather(city) {
    const url = `${BASE_URL}?q=${encodeURIComponent(city)}&appid=${API_KEY}&units=metric`;

    const response = await fetch(url);
    if (!response.ok) {
      throw new Error("City not found");
    }
    const data = await response.json();
    return data;
  }

  function showWeather(data) {
    const name = data.name;
    const country = data.sys.country;
    const temp = Math.round(data.main.temp);
    const description = data.weather[0].description;
    const humidity = data.main.humidity;
    const wind = data.wind.speed;

    cityNameEl.textContent = `${name}, ${country}`;
    tempEl.textContent = `${temp}°C`;
    descEl.textContent = description.charAt(0).toUpperCase() + description.slice(1);
    extraEl.textContent = `Humidity: ${humidity}% • Wind: ${wind} m/s`;

    resultSection.classList.remove("hidden");
  }

  function showError(message) {
    errorEl.textContent = message;
    resultSection.classList.add("hidden");
  }

  form.addEventListener("submit", async function (event) {
    event.preventDefault();
    const city = cityInput.value.trim();
    if (!city) return;

    errorEl.textContent = "";
    resultSection.classList.add("hidden");

    try {
      const data = await fetchWeather(city);
      showWeather(data);
    } catch (err) {
      showError("Could not find weather for that city. Please try again.");
    }
  });
</script>

This code uses fetch() with async/await to call the OpenWeatherMap API, then updates the DOM with temperature, description, humidity, and wind data.[web:649][web:657]

🧪 Practice Task

1. Create a new folder weather-app/ and add index.html, style.css, and app.js (or use one HTML file with inline CSS/JS as above).
2. Get a free API key from OpenWeatherMap and test with a few cities (Hyderabad, Chennai, New York, etc.).[web:662]
3. Optional: Show a loading message while the request is in progress, and add basic icons or background changes based on weather description.[web:649][web:657]