-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
62 lines (49 loc) · 2.2 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
const apiKey = '5d7d2b7fe47f9555ee4f7010a70f3dda';
async function getWeatherData() {
const cityInput = document.getElementById('city-input');
const cityName = cityInput.value;
if (!cityName) {
alert('Please enter a city name.');
return;
}
try {
const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=${apiKey}&units=metric`);
const data = await response.json();
console.log('API Response:', data); // Log the API response
if (response.ok) {
displayWeatherData(data);
} else {
throw new Error(data.message);
}
} catch (error) {
console.error('Error:', error.message); // Log any errors
alert(`Error: ${error.message}`);
}
}
function displayWeatherData(data) {
const weatherDataDiv = document.getElementById('weather-data');
weatherDataDiv.innerHTML = '';
const weatherDataItems = [
{ label: 'City', value: data.name, icon: 'map-marker-alt' },
{ label: 'Country', value: data.sys.country, icon: 'globe-americas' },
{ label: 'Temperature', value: `${data.main.temp}°C`, icon: 'temperature-low' },
{ label: 'Feels like', value: `${data.main.feels_like}°C`, icon: 'temperature-low' },
{ label: 'Humidity', value: `${data.main.humidity}%`, icon: 'tint' },
{ label: 'Wind speed', value: `${data.wind.speed} m/s`, icon: 'wind' }
];
weatherDataItems.forEach(item => {
const weatherDataItemDiv = document.createElement('div');
weatherDataItemDiv.classList.add('weather-data-item');
const icon = document.createElement('i');
icon.className = `fa fa-${item.icon}`;
icon.style.marginRight = '0.5rem';
const label = document.createElement('span');
label.textContent = item.label + ':';
const value = document.createElement('span');
value.textContent = item.value;
weatherDataItemDiv.appendChild(icon);
weatherDataItemDiv.appendChild(label);
weatherDataItemDiv.appendChild(value);
weatherDataDiv.appendChild(weatherDataItemDiv);
});
}