script.js

const apiKey = "8dbc7a3bb42f8ef369d789504dda50ae";
const weatherApiUrl = "https://api.openweathermap.org/data/2.5/weather?units=metric&q=";
const geoApiUrl = "https://api.openweathermap.org/geo/1.0/direct?q=";

const searchBox = document.querySelector(".search input");
const suggestionBox = document.querySelector(".city-suggestions");
const weatherIcon = document.querySelector(".weather-icon");

// Fetch and display weather details
async function checkWeather(city) {
    if (!city) return;

    const response = await fetch(weatherApiUrl + city + `&appid=${apiKey}`);
    
    if (response.status == 404) {
        document.querySelector(".error").style.display = "block";
        document.querySelector(".weather").style.display = "none";
    } else {
        const data = await response.json();

        document.querySelector(".city").innerHTML = data.name;
        document.querySelector(".temp").innerHTML = Math.round(data.main.temp) + "°c";
        document.querySelector(".humidity").innerHTML = data.main.humidity + "%";
        document.querySelector(".wind").innerHTML = data.wind.speed + " km/h";

        // Set weather icon based on condition
        const weatherCondition = data.weather[0].main;
        const weatherIcons = {
            Clouds: "images/clouds.png",
            Clear: "images/clear.png",
            Rain: "images/rain.png",
            Drizzle: "images/drizzle.png",
            Mist: "images/mist.png"
        };
        weatherIcon.src = weatherIcons[weatherCondition] || "images/default.png";

        document.querySelector(".weather").style.display = "block";
        document.querySelector(".error").style.display = "none";
    }
}

// Fetch city suggestions
async function fetchCitySuggestions(query) {
    if (!query) {
        suggestionBox.innerHTML = "";
        suggestionBox.style.display = "none"; // Hide dropdown if empty
        return;
    }

    const response = await fetch(`${geoApiUrl}${query}&limit=5&appid=${apiKey}`);
    const cities = await response.json();
    
    suggestionBox.innerHTML = "";

    if (cities.length === 0) {
        suggestionBox.style.display = "none"; // Hide if no results
        return;
    }

    cities.forEach(city => {
        let option = document.createElement("div");
        option.classList.add("suggestion");
        option.innerText = `${city.name}, ${city.country}`;
        
        // When clicked, set input field and fetch weather
        option.addEventListener("click", () => {
            searchBox.value = city.name;
            suggestionBox.innerHTML = "";
            suggestionBox.style.display = "none"; // Hide dropdown
            checkWeather(city.name);
        });

        suggestionBox.appendChild(option);
    });

    suggestionBox.style.display = "block"; // Show dropdown
}

// Close suggestions when clicking outside
document.addEventListener("click", (event) => {
    if (!document.querySelector(".search").contains(event.target)) {
        suggestionBox.style.display = "none";
    }
});

// Event listeners
searchBox.addEventListener("input", () => fetchCitySuggestions(searchBox.value));
searchBox.addEventListener("change", () => checkWeather(searchBox.value));