-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathscript.js
More file actions
95 lines (66 loc) · 2.87 KB
/
script.js
File metadata and controls
95 lines (66 loc) · 2.87 KB
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
const searchBtn = document.querySelector(".input__btn")
const container = document.querySelector(".main__container")
const weather = document.querySelector(".weather__container")
const gradient = document.querySelector(".gradient")
const gradient2 = document.querySelector(".gradient2")
const error404 = document.querySelector(".not-found__container")
searchBtn.addEventListener("click", () => {
const APIKey = "c5adfdc2376aaf0f3776b1b6783a2e5e"
let city = document.querySelector(".input__text").value
if (city === "") {
alert("Please, enter your city")
}
fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${APIKey}`).then(response => response.json()).then(json => {
const image = document.querySelector(".weather__icon")
const temp = document.querySelector(".weather__temp")
const humidity = document.querySelector(".weather__humidity")
const wind = document.querySelector(".weather__wind")
const hot = document.querySelector(".gradient__hot")
const cold = document.querySelector(".gradient__cold")
const snow = document.querySelector(".gradient__snow")
if(json.cod == "404") {
container.style.height = "500px"
weather.classList.remove("active")
error404.classList.add("active")
return
}
container.style.height = "550px"
weather.classList.add("active")
error404.classList.remove("active")
removeActive(hot, cold, snow)
switch(json.weather[0].main) {
case "Clear":
image.src = "Assets/sun.svg";
hot.classList.add("active")
break;
case "Rain":
image.src = "Assets/rain.svg";
cold.classList.add("active")
break;
case "Snow":
image.src = "Assets/snow.svg";
snow.classList.add("active")
break;
case "Clouds":
image.src = "Assets/cloud.svg";
cold.classList.add("active")
break;
case "Mist":
image.src = "Assets/humidity.svg";
snow.classList.add("active")
break;
default:
image.src= "Assets/cloud.svg"
}
temp.innerHTML = `${parseInt(json.main.temp)}ºC`
humidity.innerHTML = `${json.main.humidity}%`
wind.innerHTML = `${parseInt(json.wind.speed)}Km/h`
gradient.style.display="none"
gradient2.style.display="none"
function removeActive () {
hot.classList.remove("active")
cold.classList.remove("active")
snow.classList.remove("active")
}
})
})