script1.js

const API_KEY = "8f5cae9019fe4ce3802163601251912";

async function getWeather() {
    const city = document.getElementById("cityInput").value.trim();
    const currentWeather = document.getElementById("currentWeather");
    const forecastDiv = document.getElementById("forecast");
    const forecastTitle = document.getElementById("forecastTitle");

    if (!city) {
        currentWeather.innerHTML = "<p>Please enter a city name.</p>";
        return;
    }

    currentWeather.innerHTML = "<p>Loading...</p>";
    forecastDiv.innerHTML = "";
    forecastTitle.classList.add("hidden");

    try {
        const url = `https://api.weatherapi.com/v1/forecast.json?key=${API_KEY}&q=${encodeURIComponent(city + ",IN")}&days=7&aqi=yes`;


        const response = await fetch(url);
        const data = await response.json();

        if (data.error) {
            throw new Error(data.error.message);
        }

    
        currentWeather.innerHTML = `
            <h2>${data.location.name}, ${data.location.country}</h2>
            <img src="${data.current.condition.icon}">
            <h1>${Math.round(data.current.temp_c)}°C</h1>
            <p>${data.current.condition.text}</p>
            <p>Feels like: ${Math.round(data.current.feelslike_c)}°C</p>
            <p>Humidity: ${data.current.humidity}%</p>
            <p>Wind: ${data.current.wind_kph} km/h</p>
        `;


        forecastTitle.classList.remove("hidden");

        data.forecast.forecastday.forEach(day => {
            const date = new Date(day.date).toLocaleDateString("en-US", {
                weekday: "short"
            });

            forecastDiv.innerHTML += `
                <div class="day">
                    <p>${date}</p>
                    <img src="${day.day.condition.icon}">
                    <p>
                      ${Math.round(day.day.maxtemp_c)}° /
                      ${Math.round(day.day.mintemp_c)}°
                    </p>
                    <p>${day.day.condition.text}</p>
                </div>
            `;
        });

    } catch (error) {
        currentWeather.innerHTML = `<p>${error.message}</p>`;
    }
}