script.js

const API_KEY = "YOUR_API_KEY_HERE"; // Get your free key from https://www.weatherapi.com/
const form = document.getElementById("form");
const input = document.getElementById("input");
const container = document.getElementById("container");

function getIcon(text) {
  const t = text.toLowerCase();
  if (t.includes("thunder"))                        return "fa-bolt";
  if (t.includes("snow") || t.includes("ice"))      return "fa-snowflake";
  if (t.includes("rain") || t.includes("shower"))   return "fa-cloud-rain";
  if (t.includes("drizzle") || t.includes("mist"))  return "fa-cloud-drizzle";
  if (t.includes("fog") || t.includes("haze"))      return "fa-smog";
  if (t.includes("cloudy") || t.includes("overcast")) return "fa-cloud";
  if (t.includes("sunny") || t.includes("clear"))   return "fa-sun";
  return "fa-cloud";
}

async function showWeather(city) {
  container.innerHTML = `<p class="text-center mt-10 opacity-60">Loading...</p>`;

  try {
    const res = await fetch(`https://api.weatherapi.com/v1/current.json?key=${API_KEY}&q=${city}&aqi=no`);
    const d = await res.json();

    container.innerHTML = `
      <div class="text-right my-2">
        <p class="font-bold text-xl">${d.location.country}</p>
        <p class="italic text-sm opacity-70">${d.location.name}</p>
      </div>
      <div class="text-center my-4">
        <i class="fa-solid ${getIcon(d.current.condition.text)} text-7xl"></i>
        <h1 class="font-black text-7xl mt-2">${d.current.temp_c}<sup>°</sup></h1>
        <p class="text-sm opacity-60 mt-1">${d.current.condition.text}</p>
        <p class="text-xs opacity-50 mt-1">${d.location.localtime}</p>
      </div>
      <div class="flex justify-around text-xs opacity-70 mt-2">
        <div class="text-center"><i class="fa-solid fa-droplet"></i><p>${d.current.humidity}%</p><p>Humidity</p></div>
        <div class="text-center"><i class="fa-solid fa-wind"></i><p>${d.current.wind_kph} km/h</p><p>Wind</p></div>
        <div class="text-center"><i class="fa-solid fa-temperature-half"></i><p>${d.current.feelslike_c}°</p><p>Feels like</p></div>
      </div>
    `;
  } catch {
    container.innerHTML = `<p class="text-center mt-10 opacity-60">City not found. Try again.</p>`;
  }
}

showWeather("Karachi");

form.addEventListener("submit", (e) => {
  e.preventDefault();
  if (input.value.trim()) showWeather(input.value.trim());
});