weather.js

const URL_BASE = `https://goweather.herokuapp.com/weather`;
const search = document.getElementById("search");
const btn = document.getElementById("btn");
const Fullname = document.getElementById("name");
const main1 = document.getElementById("main-container1");
const main2 = document.getElementById("main-container2");
const main3 = document.getElementById("main-container3");
const main4 = document.getElementById("main-container4");



btn.addEventListener("click", (event) => {
    event.preventDefault();
    const city = search.value.trim();

    if (city === '') {
        alert("Please enter a city name!");
    } else {
        console.log(city);
        const URL = `${URL_BASE}/${city.toLowerCase()}`;
        let p = document.createElement("p");
        p.innerText = `${city}`;
        Fullname.append(p);
        console.log(p);
        console.log(URL);

        fetch(URL)
            .then(response => response.json())
            .then(data => {
                console.log(data);
                main1.innerHTML = '';
                main2.innerHTML = '';
                main3.innerHTML = '';
                main4.innerHTML = '';

                // Display current weather in main1
                const currentWeather = `
                    <p>Temperature: ${data.temperature || "N/A"}</p>
                    <p>Wind: ${data.wind || "N/A"}</p>
                    <p>Description: ${data.description || "N/A"}</p>`;
                main1.innerHTML = currentWeather;

                // Display forecast data in main2, main3, and main4
                const forecast = data.forecast;
                if (forecast && forecast.length >= 3) {
                    const day1 = forecast[0];
                    const day2 = forecast[1];
                    const day3 = forecast[2];

                    main2.innerHTML = `
                        <h3>Day ${day1.day}</h3>
                        <p>Temperature: ${day1.temperature}</p>
                        <p>Wind: ${day1.wind}</p>`;

                    main3.innerHTML = `
                        <h3>Day ${day2.day}</h3>
                        <p>Temperature: ${day2.temperature}</p>
                        <p>Wind: ${day2.wind}</p>`;

                    main4.innerHTML = `
                        <h3>Day ${day3.day}</h3>
                        <p>Temperature: ${day3.temperature}</p>
                        <p>Wind: ${day3.wind}</p>`;
                } else {
                    const errorMsg = `<p>Forecast data is not available for the next 3 days.</p>`;
                    main2.innerHTML = errorMsg;
                    main3.innerHTML = errorMsg;
                    main4.innerHTML = errorMsg;
                }
            })
            .catch(error => {
                console.error("Error fetching data:", error);
            });
    }
});