script.js

document.addEventListener("DOMContentLoaded", function () {
  const cityInput = document.getElementById("city-input");
  const getWeatherBtn = document.getElementById("getWeatherbutton");
  const weatherInfo = document.getElementById("weather-info");
  const cityName = document.getElementById("cityName");
  const temperatureDisplay = document.getElementById("temperature");
  const descriptionDisplay = document.getElementById("description");
  const errorMessage = document.getElementById("error-message");
  const forecastContainer = document.getElementById("forecast");

  const API_KEY = "YOUR_API_KEY";


  getWeatherBtn.addEventListener("click", async () => {
    const city = cityInput.value.trim();
    if (city === "") {
      showError("⚠️ Please enter a city name");
      return;
    }

    try {
      const currentWeather = await fetchWeatherData(city);
      const forecastData = await fetchForecastData(city);

      displayWeatherData(currentWeather);
      displayForecastData(forecastData);
    } catch (error) {
      showError("❌ City not found. Please try again.");
    }
  });


  async function fetchWeatherData(city) {
    const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${API_KEY}`;
    const response = await fetch(url);

    if (!response.ok) {
      throw new Error("Weather fetch failed");
    }

    return await response.json();
  }

 async function fetchForecastData(city) {
    const url = `https://api.openweathermap.org/data/2.5/forecast?q=${city}&units=metric&appid=${API_KEY}`;
    const response = await fetch(url);

    if (!response.ok) {
      throw new Error("Forecast fetch failed");
    }

    return await response.json();
  }


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

    cityName.textContent = name;
    temperatureDisplay.textContent = `🌡 Temperature: ${main.temp} °C`;
    descriptionDisplay.textContent = `🌥 Condition: ${weather[0].description}`;

    weatherInfo.classList.remove("hidden");
    errorMessage.classList.add("hidden");
  }


  function displayForecastData(data) {
    forecastContainer.innerHTML = ""; 

   
    const dailyForecasts = data.list.filter(f => f.dt_txt.includes("12:00:00"));

    dailyForecasts.forEach(day => {
      const date = new Date(day.dt_txt).toDateString();
      const temp = day.main.temp;
      const desc = day.weather[0].description;
      const icon = day.weather[0].icon;

      const card = document.createElement("div");
      card.classList.add("forecast-card");

      card.innerHTML = `
        <h4>${date}</h4>
        <img src="https://openweathermap.org/img/wn/${icon}@2x.png" alt="${desc}">
        <p>🌡 ${temp} °C</p>
        <p>${desc}</p>
      `;

      forecastContainer.appendChild(card);
    });
  }


  function showError(msg = "Something went wrong") {
    weatherInfo.classList.add("hidden");  
    errorMessage.textContent = msg;
    errorMessage.classList.remove("hidden"); 
    forecastContainer.innerHTML = "";
  }
});