script.js

// ===================================================
// CONFIG
// Get your free API key at: https://openweathermap.org/api
// Sign up → API keys tab → copy your key → paste below
// ===================================================
const API_KEY = "a1f2e6edebefd0e30493101a02de69ec"; // 🔑 
const BASE_URL = "https://api.openweathermap.org/data/2.5/weather";

// ===================================================
// DOM REFERENCES
// ===================================================
const searchForm   = document.getElementById("searchForm");
const cityInput    = document.getElementById("cityInput");
const errorMsg     = document.getElementById("errorMsg");
const loading      = document.getElementById("loading");
const weatherCard  = document.getElementById("weatherCard");
const emptyHint    = document.getElementById("emptyHint");

const cityName     = document.getElementById("cityName");
const condition     = document.getElementById("condition");
const weatherIcon  = document.getElementById("weatherIcon");
const temperature  = document.getElementById("temperature");
const feelsLike    = document.getElementById("feelsLike");
const humidity     = document.getElementById("humidity");
const wind         = document.getElementById("wind");
const pressure     = document.getElementById("pressure");
const visibility   = document.getElementById("visibility");

// Emoji map for weather conditions (keeps the project dependency-free —
// no external icon library needed)
const weatherEmojis = {
  Clear: "☀️",
  Clouds: "☁️",
  Rain: "🌧️",
  Drizzle: "🌦️",
  Thunderstorm: "⛈️",
  Snow: "❄️",
  Mist: "🌫️",
  Fog: "🌫️",
  Haze: "🌫️",
};

// ===================================================
// UI STATE HELPERS
// ===================================================
function showLoading() {
  loading.hidden = false;
  errorMsg.hidden = true;
  weatherCard.hidden = true;
  emptyHint.hidden = true;
}

function showError(message) {
  loading.hidden = true;
  weatherCard.hidden = true;
  emptyHint.hidden = true;
  errorMsg.textContent = message;
  errorMsg.hidden = false;
}

function showWeather() {
  loading.hidden = true;
  errorMsg.hidden = true;
  emptyHint.hidden = true;
  weatherCard.hidden = false;
}

// ===================================================
// FETCH WEATHER DATA (async/await + Fetch API)
// ===================================================
async function fetchWeather(city) {
  showLoading();

  try {
    const response = await fetch(
      `${BASE_URL}?q=${encodeURIComponent(city)}&units=metric&appid=${API_KEY}`
    );

    if (!response.ok) {
      if (response.status === 404) {
        throw new Error(`We couldn't find "${city}". Check the spelling and try again.`);
      }
      if (response.status === 401) {
        throw new Error("Invalid API key. Please check your OpenWeatherMap API key in script.js.");
      }
      throw new Error("Something went wrong while fetching weather data. Please try again.");
    }

    const data = await response.json();
    renderWeather(data);
  } catch (err) {
    showError(err.message);
  }
}

// ===================================================
// RENDER WEATHER DATA TO UI
// ===================================================
function renderWeather(data) {
  const main = data.weather[0].main;

  cityName.textContent = `${data.name}, ${data.sys.country}`;
  condition.textContent = data.weather[0].description;
  weatherIcon.textContent = weatherEmojis[main] || "🌡️";

  temperature.textContent = `${Math.round(data.main.temp)}°C`;
  feelsLike.textContent = `Feels like ${Math.round(data.main.feels_like)}°C`;

  humidity.textContent = `${data.main.humidity}%`;
  wind.textContent = `${data.wind.speed} m/s`;
  pressure.textContent = `${data.main.pressure} hPa`;
  visibility.textContent = `${(data.visibility / 1000).toFixed(1)} km`;

  // Update background theme based on condition
  document.body.className = main.toLowerCase();

  showWeather();
}

// ===================================================
// EVENT LISTENERS
// ===================================================
searchForm.addEventListener("submit", (e) => {
  e.preventDefault();

  const city = cityInput.value.trim();
  if (!city) {
    showError("Please enter a city name to search.");
    return;
  }

  fetchWeather(city);
});