Day 30

Project: Weather App

30 min

JavaScript 100 Days

30 din mein jo seekha — functions, fetch, async/await, DOM manipulation, error handling — sab use karke ek real Weather App banate hain. OpenWeatherMap ka free API use karenge.

HTML Structure

Simple, clean UI banao.

index.html

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Weather App</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: Arial, sans-serif; background: #0f0f0f; color: #fff; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
    .card { background: #1a1a1a; border-radius: 20px; padding: 40px; width: 360px; text-align: center; }
    input { width: 100%; padding: 12px 16px; border-radius: 10px; border: 1px solid #333; background: #111; color: #fff; font-size: 15px; margin-bottom: 12px; }
    button { width: 100%; padding: 12px; background: var(--primary); color: #000; border: none; border-radius: 10px; font-weight: 700; font-size: 15px; cursor: pointer; }
    #weather { margin-top: 28px; display: none; }
    .temp { font-size: 64px; font-weight: 800; color: var(--primary); }
    .city { font-size: 22px; margin-bottom: 8px; }
    .desc { color: #888; text-transform: capitalize; }
    .error { color: #ff6b6b; margin-top: 16px; font-size: 14px; }
  </style>
</head>
<body>
  <div class="card">
    <h1 style="margin-bottom:24px">🌤 Weather App</h1>
    <input id="cityInput" type="text" placeholder="City name likho... (e.g. Lahore)" />
    <button id="searchBtn">Get Weather</button>
    <div id="error" class="error"></div>
    <div id="weather">
      <p class="city" id="cityName"></p>
      <p class="temp" id="temp"></p>
      <p class="desc" id="desc"></p>
      <p id="humidity" style="color:#888;margin-top:8px"></p>
    </div>
  </div>
  <script src="app.js"></script>
</body>
</html>

JavaScript Logic

API call, DOM update, error handling sab karo.

app.js

javascript

// NOTE: Get free API key from openweathermap.org
const API_KEY = "YOUR_API_KEY_HERE";

const searchBtn = document.getElementById("searchBtn");
const cityInput = document.getElementById("cityInput");
const weatherDiv = document.getElementById("weather");
const errorDiv = document.getElementById("error");

async function getWeather(city) {
  const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`;

  try {
    errorDiv.textContent = "";
    weatherDiv.style.display = "none";
    searchBtn.textContent = "Loading...";

    let res = await fetch(url);
    if (!res.ok) throw new Error("City not found!");

    let data = await res.json();

    document.getElementById("cityName").textContent =
      `${data.name}, ${data.sys.country}`;
    document.getElementById("temp").textContent =
      `${Math.round(data.main.temp)}°C`;
    document.getElementById("desc").textContent =
      data.weather[0].description;
    document.getElementById("humidity").textContent =
      `Humidity: ${data.main.humidity}%`;

    weatherDiv.style.display = "block";

  } catch (err) {
    errorDiv.textContent = "❌ " + err.message;
  } finally {
    searchBtn.textContent = "Get Weather";
  }
}

searchBtn.addEventListener("click", () => {
  let city = cityInput.value.trim();
  if (!city) return;
  getWeather(city);
});

cityInput.addEventListener("keydown", e => {
  if (e.key === "Enter") searchBtn.click();
});

🎯 Practice Challenge

Weather app mein improvements: 5-day forecast add karo, city ka local time dikhao, aur search history localStorage mein save karo.

this Keyword Deep DiveEvent Loop & Call Stack