WeatherApp/index.js at main · Jordan-Read/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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
const apiKey = "f40513bb59b0e052e4a6d2ca062f2e17"
const apiUrl = "https://api.openweathermap.org/data/2.5/weather?units=metric&q="


const searchbar = document.querySelector(".search input")

const searchButton = document.querySelector(".search button")

const weatherIcon = document.querySelector(".weather-icon")

async function checkWeather(city){
    const response = await fetch(apiUrl + city + `&appid=${apiKey}`)

    if (response.status == 400){
        document.querySelector(".error").style.display = "block"
         document.querySelector(".weather").style.display = "none"
    } else {
        var data = await response.json()

        document.querySelector(".city").innerHTML = data.name;
        document.querySelector(".temp").innerHTML = Math.round(data.main.temp) + "°C";
        document.querySelector(".humidity").innerHTML = data.main.humidity + "%";
        document.querySelector(".wind").innerHTML = data.wind.speed + "km/h";

        let weather = data.weather[0].main.toLowerCase();

        if (weather == "clouds"){
            weatherIcon.src = "assets/clouds.png";
        } else if (weather == "clear") {
            weatherIcon.src = "assets/clear.png";
        } else if (weather == "rain") {
            weatherIcon.src = "assets/rain.png";
        } else if (weather == "drizzle") {
            weatherIcon.src = "assets/drizzle.png";
        } else if (weather == "mist") {
            weatherIcon.src = "assets/mist.png";
        } else {
            console.log("Unexpected weather condition: " + weather);
        }

        document.querySelector(".weather").style.display = "block"
        document.querySelector(".error").style.display = "none"

    }


}


searchButton.addEventListener("click", () => {
    checkWeather(searchbar.value)
})


// const searchbar = document.querySelector(".search input")
// const searchbtn = document.querySelector(".search button")
// const weatherIcon = document.querySelector(".weather-icon")

// async function checkWeather(city){
//     const response = await fetch(apiUrl + city + `&appid=${apiKey}`);

//     if (response.status == 404){
//         document.querySelector(".error").style.display = "block"
//         document.querySelector(".weather").style.display = "none"
//     } else {
//         var data = await response.json()
//         console.log(data);

//         document.querySelector(".city").innerHTML = data.name;
//         document.querySelector(".temp").innerHTML = Math.round(data.main.temp) + "°C";
//         document.querySelector(".humidity").innerHTML = data.main.humidity + "%";
//         document.querySelector(".wind").innerHTML = data.wind.speed + "km/h";

//         let weather = data.weather[0].main.toLowerCase();

//         if (weather == "clouds"){
//             weatherIcon.src = "assets/clouds.png";
//         } else if (weather == "clear") {
//             weatherIcon.src = "assets/clear.png";
//         } else if (weather == "rain") {
//             weatherIcon.src = "assets/rain.png";
//         } else if (weather == "drizzle") {
//             weatherIcon.src = "assets/drizzle.png";
//         } else if (weather == "mist") {
//             weatherIcon.src = "assets/mist.png";
//         } else {
//             console.log("Unexpected weather condition: " + weather);
//         }

//         document.querySelector(".weather").style.display = "block"
//         document.querySelector(".error").style.display = "none"
//     }


// }


// searchbtn.addEventListener("click", () => {
//     checkWeather(searchbar.value);
// })