-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
71 lines (60 loc) · 2.2 KB
/
main.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
function getWeather() {
const apiKey = 'e2657fa812d81987daa62718171530c5';
const city = document.getElementById('city').value;
if(!city) {
alert('Please Enter a City');
return;
}
const currentWeatherUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`;
const forecastUrl = `https://api.openweathermap.org/data/2.5/forecast?q=${city}&appid=${apiKey}`;
fetch(currentWeatherUrl)
.then(response => response.json())
.then(data => {
displayWeather(data);
})
.catch(error => {
console.error('Error fetching current weather data:',error);
alert('Error fetching current weather data. Please try again.');
});
fetch(forecastUrl)
.then(response => response.json())
.then(data => {
displayHourlyForecast(data.list);
})
.catch(error => {
console.error('Error fetching Hourly Forecast data:',error);
});
}
function displayWeather(data){
const tempDivInfo = document.getElementById('temp-div');
const weatherInfoDiv = document.getElementById('weather-info');
const weatherIcon = document.getElementById('weather-icon');
const hourlyForecastDiv = document.getElementById('hourly-forecast');
//clear previous content
weatherInfoDiv.innerHTML = '';
hourlyForecastDiv.innerHTML = '';
tempDivInfo.innerHTML = '';
if(data.cod === '404'){
weatherInfoDiv.innerHTML = `<p>${data.message}</p>`;
}
else{
const cityName = data.name;
const temperature = Math.round(data.main.temp - 273.15);
const description = data.weather[0].description;
const iconCode = data.weather[0].icon;
const iconUrl = `https://openweathermap.org/img/wn/${iconCode}@4x.png`;
const temperatureHTML = `<p>${temperature}°C</p>`;
const weatherHtml =
`<p>${cityName}</p>
<p>${description}</p>`;
tempDivInfo.innerHTML = temperatureHTML;
weatherInfoDiv.innerHTML = weatherHtml;
weatherIcon.src = iconUrl;
weatherIcon.alt = description;
showImage();
}
}
function showImage(){
const weatherIcon = document.getElementById('weather-icon');
weatherIcon.style.display = 'block';
}