Weather-app/script.js at main · Vislavathsunil/Weather-app · 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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
const container = document.querySelector(".weather-main-container");
const serach = document.querySelector(".weather-serach button")
const WeatherBox = document.querySelector(".weather-box")
const WeatherDetails = document.querySelector(".weather-details")
const error = document.querySelector(".not-found");
const hideCity = document.querySelector("#hide-city");


serach.addEventListener("click", () => {


    // API key
    const APIKey = '1df024886d844838bd5c71f743edf4b3';


    let city = document.querySelector("#input").value;

    if (city == '') {
        return;
    }

    fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${APIKey}`).then(response => response.json()).then(json => {


        if (json.cod == '404') {
            container.style.height = "55vh";
            WeatherBox.classList.remove("active");
            WeatherDetails.classList.remove("active");
            error.classList.add("active");
            return;
        }

        container.style.height = "75vh";
        WeatherBox.classList.add("active");
        WeatherDetails.classList.add("active");
        error.classList.remove("active");

        const image = document.querySelector(".weather-info img");
        const temperature = document.querySelector(".weather-info .temperature");
        const description = document.querySelector(".weather-info .description");
        const Humidity = document.querySelector(".Humidity-text p");
        const Wind = document.querySelector(".Wind-text p");


        switch (json.weather[0].main) {
            case "Clouds":
                image.src = "cloud.png";
                break;
            case "Rain":
                image.src = "rain.png";
                break;
            case "Snow":
                image.src = "snow.png";
                break;
            case "Clear":
                image.src = "clear.png";
                break;
            case "Mist":
                image.src = "mist.png";
                break;
            case "Haze":
                image.src = "mist.png";
                break;
            default:
                image.src = "404.png";
        }


        temperature.innerHTML = `${json.main.temp}<span>°C</span>`;
        description.innerHTML = `${json.weather[0].description}`;
        Humidity.innerHTML = `${json.main.humidity}%`;
        Wind.innerHTML = `${json.wind.speed} Km/h`;

        city = "";
    });


})