-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathweather.js
119 lines (97 loc) · 3.96 KB
/
weather.js
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
118
119
//COLOR CHANGE IN JS
daynightmode = () => {
let date = new Date();
let hour = date.getHours();
if (hour > 7 && hour < 17)
document.body.style.background = "linear-gradient(0.50turn, white, yellow, lightblue)";
else if (hour >= 17 && hour < 19)
document.body.style.background = "linear-gradient(0.50turn, white, lightblue, white)";
else
document.body.style.background = "linear-gradient(0.50turn, BLACK, #33adff, black)";
}
window.addEventListener('load', daynightmode);
document.querySelector("#toggle").addEventListener('click', () => {
if (document.querySelector("#slide").style.display == 'none') {
document.querySelector("#slide").style.display = 'block'
} else {
document.querySelector("#slide").style.display = 'none'
}
})
//load
document.querySelector("#input").addEventListener("keydown", (event) => {
if (event.key === "Enter")
loadWeather(input.value);
})
defaultWeather = () => {
loadWeather("Rohini,Delhi");
};
window.addEventListener('load', defaultWeather);
// Request to the weather API
loadWeather = (input) => {
const url = `https://api.openweathermap.org/data/2.5/weather?q=${input}&units=metric&appid=16a2314e91b166c8c3c5b3c33539f22b`;
fetch(url)
.then(response => {
if (!response.ok) throw Error(response.statusText);
return response.json();
})
.then(data => {
document.querySelector("#isValid").textContent = "";
displayWeather(data);
})
.catch(error => document.querySelector("#isValid").textContent = error);
}
//Data
displayWeather = (data) => {
document.querySelector("#img").className = "";
setImage(data);
document.querySelector("#degree").className = "";
document.querySelector("#degree").innerHTML = ((data.main.temp)).toFixed(0) + '°<span style="font-size: 40px;margin-top: -10px;">C</span>';
document.querySelector("#wind").className = ""
document.querySelector("#wind").innerHTML = `WindSpeed: ${data.wind.speed}M/s`;
document.querySelector("#press").className = ""
document.querySelector("#press").innerHTML = `Pressure: ${data.main.pressure}mb`
document.querySelector('#humidity').className = ""
document.querySelector("#humidity").innerHTML = `Humidity: ${data.main.humidity}%`
document.querySelector("#city").className = "";
document.querySelector("#city").textContent = data.name;
document.querySelector("#input").value = '';
}
document.querySelector('#slide').addEventListener('click', () => {
if (document.querySelector("#slide").style.display == 'none') {
document.querySelector("#image").style.display.width = '100%'
}
})
// Set the weather image
setImage = (data) => {
if (data.weather[0].main === "Clear") {
document.querySelector("#img").src = "sun.png";
}
if (data.weather[0].main === "Snow") {
document.querySelector("#img").src = "snowman.png";
}
if (data.weather[0].main === "Thunderstorm") {
document.querySelector("#img").src = "thunder.png";
}
if (data.weather[0].main === "Drizzle" ||
data.weather[0].main === "Mist" ||
data.weather[0].main === "Smoke" ||
data.weather[0].main === "Haze" ||
data.weather[0].main === "Dust" ||
data.weather[0].main === "Fog" ||
data.weather[0].main === "Sand" ||
data.weather[0].main === "Dust" ||
data.weather[0].main === "Ash" ||
data.weather[0].main === "Squall" ||
data.weather[0].main === "Tornado") {
document.querySelector("#img").src = "drizzle.png";
}
if (data.weather[0].main === "Clouds") {
if (data.weather[0].description === "few clouds")
document.querySelector("#img").src = "cloudy.png";
else
document.querySelector("#img").src = "overcast.png";
}
if (data.weather[0].main === "Rain") {
querySelector("#img").src = "lightrain.png";
}
}