script.js

// When user clicks search
document.getElementById("searchBtn").addEventListener("click", () => {
  const city = document.getElementById("cityField").value.trim();
  if (city) {
    getCoordinates(city); // Call coordinate function
  } else {
    showError("Please enter a city name"); // Show error if empty 
  }
});

async function getCoordinates(city) {
  showError(""); // Clear previous error
  try {
    const response = await fetch(
      `https://geocoding-api.open-meteo.com/v1/search?name=${city}&count=1`
    ); // API call

    if (!response.ok) {
      throw new Error("City not found");
    }

    const data = await response.json(); // Parse JSON
    if (!data.results || data.results.length === 0) {
      throw new Error("Location not found");
    }

    const { latitude, longitude, name, country } = data.results[0]; // Extract data
    getWeather(latitude, longitude, name, country); // Call weather function
  } catch (error) {
    showError(error.message); // Show error
  }
}

async function getWeather(latitude, longitude, city, country) {
  try {
    const response = await fetch(
      `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&current_weather=true`
    ); // Weather API call

    if (!response.ok) {
      throw new Error("Weather data not available");
    }

    const data = await response.json(); // Parse JSON
    displayWeather(data.current_weather, city, country);
  } catch (error) {
    showError(error.message);
  }
}

// Weather description and icon
const weatherDescriptions = {
  0: "Clear sky",
  1: "Mainly clear",
  2: "Partly cloudy",
  3: "Overcast",
  45: "Fog",
  48: "Depositing rime fog",
  51: "Light drizzle",
  53: "Moderate drizzle",
  55: "Dense drizzle",
  56: "Light freezing drizzle",
  57: "Dense freezing drizzle",
  61: "Slight rain",
  63: "Moderate rain",
  65: "Heavy rain",
  66: "Light freezing rain",
  67: "Heavy freezing rain",
  71: "Slight snow fall",
  73: "Moderate snow fall",
  75: "Heavy snow fall",
  77: "Snow grains",
  80: "Slight rain showers",
  81: "Moderate rain showers",
  82: "Violent rain showers",
  85: "Slight snow showers",
  86: "Heavy snow showers",
  95: "Thunderstorm",
  96: "Thunderstorm with slight hail",
  99: "Thunderstorm with heavy hail"
};

function displayWeather(weather, city, country) {
  const weatherContainer = document.getElementById("weatherContainer");
  const cityHeader = document.getElementById("cityName");
  const temp = document.getElementById("temperature");
  const condition = document.getElementById("condition");
  const windSpeed = document.getElementById("windSpeed");

  const weatherCondition = weatherDescriptions[weather.weathercode] || "Unknown Condition";

  weatherContainer.style.display = "block"; // Show weather box
  cityHeader.textContent = `${city}, ${country}`; // City display
  temp.textContent = `Temperature: ${weather.temperature}°C`;
  condition.textContent = `Condition: ${weatherCondition}`;
  windSpeed.textContent = `Wind Speed: ${weather.windspeed} km/h`;
}

function showError(message) {
  const weatherContainer = document.getElementById("weatherContainer");
  weatherContainer.style.display = "none"; // Hide weather box
  const errorPara = document.getElementById("errorMessage");
  errorPara.textContent = message; // Show error
}