script.js

const apiKey = "9c799a9cfd0849c776352a47f7ee97c9";

let locationInput = document.getElementById("location");
let dataContainer = document.getElementById("data-container");

let weatherBtn = document.getElementById("weather");
let clearBtn = document.getElementById("clear");

weatherBtn.addEventListener("click", async function(){
    dataContainer.innerHTML = "";
    let country = locationInput.value;
    let url = `https://api.openweathermap.org/data/2.5/weather?q=${country}&appid=${apiKey}&units=metric`;
    let weatherInfo = await getWeather(url);
    displayResult(weatherInfo);
})

async function getWeather(url)
{
    const response = await fetch(url);
    const data = await response.json();
    return data;
}

function displayResult(info)
{
    let countryName = document.createElement("h1");
    countryName.textContent = info.name;

    let dataHeader = document.createElement("div");
    dataHeader.classList.add("data-header");

    let temperature = document.createElement("h2");
    temperature.textContent = `${info.main.temp} °C`;
    dataHeader.appendChild(temperature);

    let weatherType = document.createElement("h2");
    weatherType.textContent = info.weather[0].description;
    dataHeader.appendChild(weatherType);

    let divider = document.createElement("hr");

    let extraInfo = document.createElement("div");
    extraInfo.classList.add("extra-info");

    let humidity = document.createElement("h3");
    humidity.textContent = `Humidity: ${info.main.humidity} %`;
    extraInfo.appendChild(humidity);

    let feelsLike = document.createElement("h3");
    feelsLike.textContent = `Feels Like: ${info.main.feels_like} °C`;
    extraInfo.appendChild(feelsLike);

    let windSpeed = document.createElement("h3");
    windSpeed.textContent = `Wind Speed: ${info.wind.speed} m/s`;
    extraInfo.appendChild(windSpeed);

    let maxTemp = document.createElement("h3");
    maxTemp.textContent = `Max Observed Temperature: ${info.main.temp_max} °C`;
    extraInfo.appendChild(maxTemp);

    let pressure = document.createElement("h3");
    pressure.textContent = `Pressure: ${info.main.pressure}`;
    extraInfo.appendChild(pressure);

    let minTemp = document.createElement("h3");
    minTemp.textContent = `Min Observed Temperature: ${info.main.temp_min} °C`;
    extraInfo.appendChild(minTemp);

    dataContainer.appendChild(countryName);
    dataContainer.appendChild(dataHeader);
    dataContainer.appendChild(extraInfo);
}

clearBtn.addEventListener("click", function(){
    locationInput.value = "";
    dataContainer.innerHTML = "";
})