WeatherApp/script.js at main · Shailendrasingh189/WeatherApp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
const weather = document.getElementById("weather-details");
const search = document.querySelector("#search input");
const showErr = document.getElementById("error");

const searchBtn = document.querySelector("#search button");
const weatherIcon = document.querySelector("#weather img")

const apiKey = "50d546c1f017ef762afe04e6b618906e";
const apiUrl =
    "https://api.openweathermap.org/data/2.5/weather?units=metric&q=";

//show the Weather
const weatherShow = (data) => {
    if(data.weather[0].main == "Clouds") {
        weatherIcon.src = "images/clouds.png";
    }
    else if(data.weather[0].main == "Clear") {
        weatherIcon.src = "images/clear.png";
    }
    else if(data.weather[0].main == "Rain") {
        weatherIcon.src = "images/clouds.png";
    }
    else if(data.weather[0].main == "Drizzle") {
        weatherIcon.src = "images/drizzle.png";
    }
    else if(data.weather[0].main == "Mist") {
        weatherIcon.src = "images/clouds.png";
    }
}

//check the city to weather
const checkWeather = async (data) => {
    document.querySelector(".city").innerHTML = `${data.name}`;
    temp = Math.round(data.main.temp);
    document.querySelector(".temp").innerHTML = `${temp}°C`;
    document.querySelector(".humidity").innerHTML = `${data.main.humidity}%`;
    details.querySelector(".wind").innerHTML = `${data.wind.speed} Km/h`;
    weatherShow(data);

    weather.style.display = "block";

};

//data fetch through API
const getdata = async (city) => {
        const response = await fetch(apiUrl + city + `&appid=${apiKey}`);
        const data = await response.json();
        if(response.status == "404") {
            weather.style.display = "none";
            showErr.style.display = "block";

        }
        else {
            showErr.style.display = "none";
            checkWeather(data);

        }

};


searchBtn.addEventListener("click", () => {
    getdata(search.value);
});