script.js

const apiKey = "f82b7cf775bc52a65102d85845062e3f";

async function getWeather() {
  const city = document.getElementById("cityInput").value.trim();
  if (!city) {
    alert("Please enter a city name.");
    return;
  }

  const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

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

    const data = await response.json();
    showWeather(data);
  } catch (error) {
    document.getElementById("weatherResult").innerHTML = `<p>${error.message}</p>`;
  }
}

function showWeather(data) {
  const { name, main, weather, wind } = data;

  document.getElementById("weatherResult").innerHTML = `
    <h2>${name}</h2>
    <p><strong>🌡 Temp:</strong> ${main.temp}°C</p>
    <p><strong>☁ Condition:</strong> ${weather[0].main} (${weather[0].description})</p>
    <p><strong>💧 Humidity:</strong> ${main.humidity}%</p>
    <p><strong>🌬 Wind:</strong> ${wind.speed} m/s</p>
  `;

  updateBackground(weather[0].main.toLowerCase());
}

function updateBackground(condition) {
  const body = document.body;
  body.className = ""; // Remove previous class

  if (condition.includes("clear")) {
    body.classList.add("sunny");
  } else if (condition.includes("cloud")) {
    body.classList.add("cloudy");
  } else if (condition.includes("rain") || condition.includes("drizzle")) {
    body.classList.add("rainy");
  } else if (condition.includes("thunderstorm")) {
    body.classList.add("thunder");
  } else if (condition.includes("snow")) {
    body.classList.add("snowy");
  } else if (condition.includes("mist") || condition.includes("fog") || condition.includes("haze")) {
    body.classList.add("misty");
  } else {
    body.classList.add("default");
  }
}

// Auto detect user's location
window.onload = function () {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(async (position) => {
      const lat = position.coords.latitude;
      const lon = position.coords.longitude;

      const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${apiKey}&units=metric`;

      try {
        const response = await fetch(url);
        const data = await response.json();
        showWeather(data);
      } catch (error) {
        document.getElementById("weatherResult").innerHTML = `<p>Unable to fetch location-based weather data.</p>`;
      }
    });
  }
};