-
Notifications
You must be signed in to change notification settings - Fork 2
/
custom.js
84 lines (70 loc) · 2.21 KB
/
custom.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
const result = document.querySelector('.result');
const form = document.querySelector('.get-weather');
const nameCity = document.querySelector('#city');
const nameCountry = document.querySelector('#country');
form.addEventListener('submit', (e) => {
e.preventDefault();
if (nameCity.value === '' || nameCountry.value === '') {
showError('Ambos campos son obligatorios...');
return;
}
callAPI(nameCity.value, nameCountry.value);
//console.log(nameCity.value);
//console.log(nameCountry.value);
})
function callAPI(city, country){
const apiId = '41d1d7f5c2475b3a16167b30bc4f265c';
const url = `http://api.openweathermap.org/data/2.5/weather?q=${city},${country}&appid=${apiId}`;
fetch(url)
.then(data => {
return data.json();
})
.then(dataJSON => {
if (dataJSON.cod === '404') {
showError('Ciudad no encontrada...');
} else {
clearHTML();
showWeather(dataJSON);
}
//console.log(dataJSON);
})
.catch(error => {
console.log(error);
})
}
function showWeather(data){
const {name, main:{temp, temp_min, temp_max}, weather:[arr]} = data;
const degrees = kelvinToCentigrade(temp);
const min = kelvinToCentigrade(temp_min);
const max = kelvinToCentigrade(temp_max);
const content = document.createElement('div');
content.innerHTML = `
<h5>Clima en ${name}</h5>
<img src="https://openweathermap.org/img/wn/${arr.icon}@2x.png" alt="icon">
<h2>${degrees}°C</h2>
<p>Max: ${max}°C</p>
<p>Min: ${min}°C</p>
`;
result.appendChild(content);
/* console.log(name);
console.log(temp);
console.log(temp_max);
console.log(temp_min);
console.log(arr.icon); */
}
function showError(message){
//console.log(message);
const alert = document.createElement('p');
alert.classList.add('alert-message');
alert.innerHTML = message;
form.appendChild(alert);
setTimeout(() => {
alert.remove();
}, 3000);
}
function kelvinToCentigrade(temp){
return parseInt(temp - 273.15);
}
function clearHTML(){
result.innerHTML = '';
}