-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathscript.js
98 lines (79 loc) · 2.5 KB
/
script.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
const url = 'https://api.openweathermap.org/data/2.5/weather?units=metric';
const apiKey = '0e60c7da6bf32c866d9488108c9fb027';
const temperature = document.getElementById('temp');
const city = document.getElementById('city');
const humidity = document.getElementById('humidity');
const wind = document.getElementById('wind');
const input = document.getElementById('city-input');
const searchBtn = document.getElementById('search-btn');
const weatherImg = document.getElementById('weather-img');
const weatherDiv = document.querySelector('.weather');
input.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
showDataByCity(input.value);
}
});
searchBtn.addEventListener('click', () => {
showDataByCity(input.value);
});
const showDataByCity = (cityName) => {
getWeatherByCity(cityName)
.then((weatherData) => {
if (!weatherData) {
return;
}
updateData(weatherData);
weatherDiv.style.display = 'block';
})
}
const getWeatherByCity = async (cityName) => {
try {
const fullUrl = `${url}&q=${cityName.toLowerCase()}&appid=${apiKey}`;
const res = await fetch(fullUrl);
if (!res.ok) {
throw new Error(`Couldn't get the weather data. Error code: ${res.status}`);
}
const data = await res.json();
return data;
} catch (error) {
alert(`Couldn't get city data.`);
}
}
const updateData = (tempData) => {
temperature.innerText = `${tempData.main.temp}°C`;
city.innerText = tempData.name;
humidity.innerText = `${tempData.main.humidity}%`;
wind.innerText = `${tempData.wind.speed} km/h`;
weatherImg.src = `images/${tempData.weather[0].main.toLowerCase()}.png`;
}
const getWeatherByCoor = async (coords) => {
try {
const { latitude, longitude } = coords;
const fullUrl = `${url}&lat=${latitude}&lon=${longitude}&appid=${apiKey}`;
const res = await fetch(fullUrl);
if (!res.ok) {
throw new Error(`Couldn't get the weather data. Error code: ${res.status}`);
}
const data = await res.json();
return data;
} catch (error) {
alert(`Couldn't get weather data. ${error.message}`);
}
}
const showDataByCoor = () => {
const success = async (position) => {
getWeatherByCoor(position.coords)
.then((weatherData) => {
if (!weatherData) {
return;
}
updateData(weatherData);
weatherDiv.style.display = 'block';
});
}
const error = () => {
console.log('MAL AHÍ');
}
navigator.geolocation.getCurrentPosition(success, error);
}
showDataByCoor();