weather-app/script.js at master · monukd01dev/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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
const ApiKey = "d89836c4e165be1177ea5d634c231f29";
const button = document.querySelector(".search button");
const weather_icon = document.querySelector(".weather .weather-icon")
const input = document.querySelector('#city-input');
//function
async function checkWeather(cityName="delhi"){
    const url = `https://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=${ApiKey}&units=metric`;
    const response = await fetch(url);
    const data = await response.json();

    if(response.status == 404){
        document.querySelector(".error").style.display = "block";
        document.querySelector(".weather").style.display = "none";
    }else{
        document.querySelector(".city-name").innerHTML = data.name;
        document.querySelector(".temp").innerHTML = Math.round(data.main.temp)+"°c";
        document.querySelector(".wind").innerHTML = data.wind.speed+" km/h";
        document.querySelector(".humidity").innerHTML = data.main.humidity+"%";

        switch (data.weather[0].main) {
            case "Clouds":
                weather_icon.src = "./images/clouds.png"
                break;

            case "Rain":
                weather_icon.src = "./images/rain.png"
                break;

            case "Drizzle":
                weather_icon.src = "./images/drizzle.png"
                break;

            case "Mist":
                weather_icon.src = "./images/mist.png"
                break;

            case "Snow":
                weather_icon.src = "./images/snow.png"
                break;

            case "Clear":
                weather_icon.src = "./images/clear.png"
                break;

            case "Humidity":
                weather_icon.src = "./images/humidity.png"
                break;

            case "Thunderstorm":
                weather_icon.src = "./images/wind.png"
                break;

            default:
                break;
        }
        document.querySelector(".error").style.display = "none";
        document.querySelector(".weather").style.display = "block";
        console.log("working",data);
    }

}

//normal event handling
button.addEventListener('click',()=>{

     checkWeather(input.value.trim() || "delhi");

});

input.addEventListener('click',()=>{
    input.value="";
})

//event-delegation

// search.addEventListener('click',(e)=>{
//     if(e.target.classList.contains("search-city")){

//         checkWeather(document.querySelector('#city-input').value.trim() || "delhi");
//     }
// });


//dark-mode

const mode = document.querySelector(".mode")
mode.addEventListener('click',()=>{
    if(mode.innerText.trim() == "Light Mode"){
        mode.innerHTML = '<i class="fa-solid fa-moon"></i> <span class="mode-name">dark mode</span>'
        mode.style.backgroundColor = "#555";
        mode.style.color = "white";

        document.body.style.backgroundColor = "white"
        document.querySelector("nav").style.backgroundColor ="white"
        document.querySelector("nav").style.color ="black"
        document.querySelector("nav").style.borderBottom ="2px solid black"
        document.querySelector(".card").classList.toggle("card-shadow")


    }
    else{
        mode.innerHTML = '<i class="fa-solid fa-sun"></i> <span class="mode-name">light mode</span>'
        mode.style.backgroundColor = "white";
        mode.style.color = "black";

        document.body.style.backgroundColor = "#222"
        document.querySelector("nav").style.backgroundColor ="#767575"
        document.querySelector("nav").style.color ="white"
        document.querySelector("nav").style.borderBottom ="2px solid #999"
        document.querySelector(".card").classList.toggle("card-shadow")

    }
    console.log('clicked', mode.innerText);

})