-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
123 lines (107 loc) · 5.26 KB
/
app.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
120
121
122
123
window.addEventListener("load", () => {
// MY VARIABLES:
const inputPlace = document.getElementById("input-place");
const btn = document.getElementById("btn");
const h2 = document.querySelector("h2");
const temp = document.querySelector(".temp");
const maxTemp = document.querySelector(".max-temp");
const minTemp = document.querySelector(".min-temp");
const feelsLike = document.querySelector(".feels-like");
const humidity = document.querySelector(".humidity");
const pressure = document.querySelector(".pressure");
const windSpeed = document.querySelector(".wind-speed");
const rain = document.querySelector(".rain");
const snow = document.querySelector(".snow");
const descText = document.querySelector(".desc-text");
const descIcon = document.querySelector(".desc-icon");
// FETCHING DATA
async function fetchData(city){
// first i find latitude and longitude:
const res = await axios.get(`http://api.openweathermap.org/geo/1.0/direct?q=${city}&appid=${apiKey}`);
let lat = res.data[0].lat;
let lon = res.data[0].lon;
// then i find wanted city:
const actualRes = await axios.get(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&lang=sk&appid=88e243d6b12dd013c3c5352a08400b75&units=metric`);
return actualRes.data;
};
// INPUT:
inputPlace.addEventListener("keydown", async (e) => {
if(e.key === "Enter" && e.target.value !== ""){
let placeInfo = await fetchData(e.target.value);
// CHANGES IN HTML:
// WEATHER DATA:
descIcon.src = `https://openweathermap.org/img/wn/${placeInfo.weather["0"].icon}@2x.png`;
descText.textContent = placeInfo.weather["0"].description;
h2.textContent = `Počasie pre lokalitu ${placeInfo.name}`;
h2.style.fontSize = "1.5rem";
temp.textContent = `${placeInfo.main.temp}°C`;
maxTemp.textContent = `Maximálna teplota: ${placeInfo.main.temp_max}°C`;
minTemp.textContent = `Minimálna teplota: ${placeInfo.main.temp_min}°C`;
feelsLike.textContent = `Pocitová teplota: ${placeInfo.main.feels_like}°C`;
humidity.textContent = `Vlhkosť vzduchu: ${placeInfo.main.humidity}%`;
pressure.textContent = `Tlak vzduchu: ${placeInfo.main.pressure} hPa`;
windSpeed.textContent = `Rýchosť vetra: ${placeInfo.wind.speed} km/h`;
// RAIN OR SNOW, IF AVAILABLE:
if(placeInfo.rain || placeInfo.snow){
rain.textContent = `Zrážky poslednú za hodinu: ${placeInfo.rain["1h"]} mm`;
snow.textContent = `Snehové zrážky za poslednú hodinu ${placeInfo.snow["1h"]}`;
}
}
else{
descIcon.src = "";
descText.textContent = "";
h2.textContent = "Lokalita nebola nájdená.";
h2.style.fontSize = "1.5rem";
temp.textContent = "";
maxTemp.textContent = "";
minTemp.textContent = "";
feelsLike.textContent = "";
humidity.textContent = "";
pressure.textContent = "";
windSpeed.textContent = "";
rain.textContent = "";
snow.textContent = "";
}
});
// BUTTON
btn.addEventListener("click", async (e) => {
e.preventDefault();
if(fetchData(inputPlace.value) !== ""){
let placeInfo = await fetchData(inputPlace.value);
// HTML CHANGES
// WEATHER DATA
descIcon.src = `https://openweathermap.org/img/wn/${placeInfo.weather["0"].icon}@2x.png`;
descText.textContent = placeInfo.weather["0"].description;
h2.textContent = `Počasie pre lokalitu ${placeInfo.name}`;
h2.style.fontSize = "1.5rem";
temp.textContent = `${placeInfo.main.temp}°C`;
maxTemp.textContent = `Maximálna teplota: ${placeInfo.main.temp_max}°C`;
minTemp.textContent = `Minimálna teplota: ${placeInfo.main.temp_min}°C`;
feelsLike.textContent = `Pocitová teplota: ${placeInfo.main.feels_like}°C`;
humidity.textContent = `Vlhkosť vzduchu: ${placeInfo.main.humidity}%`;
pressure.textContent = `Tlak vzduchu: ${placeInfo.main.pressure} hPa`;
windSpeed.textContent = `Rýchosť vetra: ${placeInfo.wind.speed} km/h`;
// RAIN OR SNOW, IF AVAILABLE:
if(placeInfo.rain || placeInfo.snow){
rain.textContent = `Zrážky poslednú hodinu: ${placeInfo.rain["1h"]} mm`;
snow.textContent = `Snehové zrážky za poslednú hodinu ${placeInfo.snow["1h"]}`;
}
return
}
else{
descIcon.src = "";
descText.textContent = "";
h2.textContent = "Lokalita nebola nájdená.";
h2.style.fontSize = "1.5rem";
temp.textContent = "";
maxTemp.textContent = "";
minTemp.textContent = "";
feelsLike.textContent = "";
humidity.textContent = "";
pressure.textContent = "";
windSpeed.textContent = "";
rain.textContent = "";
snow.textContent = "";
}
})
});