Build a Weather App with JavaScript — Fetch, API Keys, UI

async function getWeather(city) {
  const KEY = "your_api_key";
  const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${KEY}`;
  const res = await fetch(url);
  if (res.status === 404) throw new Error("City not found");
  if (!res.ok) throw new Error("Weather service unavailable");
  return res.json();
}

form.addEventListener("submit", async (e) => {
  e.preventDefault();
  card.innerHTML = `<div class="spinner"></div>`;
  try {
    const d = await getWeather(input.value.trim());
    card.innerHTML = `
      <h2>${d.name}, ${d.sys.country}</h2>
      <div class="temp">${Math.round(d.main.temp)}°C</div>
      <p>${d.weather[0].description} · feels like ${Math.round(d.main.feels_like)}°</p>
      <p>💧 ${d.main.humidity}%  🌬 ${d.wind.speed} m/s</p>`;
  } catch (err) {
    card.innerHTML = `<p class="error">${err.message}</p>`;
  }
});