-
Notifications
You must be signed in to change notification settings - Fork 0
/
server.js
114 lines (68 loc) · 3.01 KB
/
server.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
// 4044426436a1b6511ef2bc709ad95976
// api.openweathermap.org/data/2.5/weather?q={city name}&appid={API key}
const weatherApi = {
key: "4044426436a1b6511ef2bc709ad95976",
baseURL: "https://api.openweathermap.org/data/2.5/"
}
// Event Listener Function On Keypress
const searchbox = document.querySelector('.search-box');
searchbox.addEventListener('keypress', (evt) => {
if(evt.keyCode == 13) { //Enter Key
getWeatherReport(searchbox.value)
}
});
//Get Weather Report
function getWeatherReport (city) {
fetch(`${weatherApi.baseURL}weather?q=${city}&units=metric&APPID=${weatherApi.key}`)
.then(weather => {
return weather.json();
}).then(showWeatherReport);
}
//Show Weather report
function showWeatherReport (weather) {
let city = document.querySelector('.location .city');
city.innerText = `${weather.name}, ${weather.sys.country}`;
let temp = document.querySelector('.current .temp');
temp.innerHTML = `${Math.round(weather.main.temp)}<span>°c</span>`;
let weatherType = document.querySelector('.current .weather');
weatherType.innerText = weather.weather[0].main;
let minMaxTemp = document.querySelector('.hi-low');
minMaxTemp.innerText = `${Math.floor(weather.main.temp_min)}°c / ${Math.ceil(weather.main.temp_max)}°c`;
let date= document.querySelector('.location .date');
let todayDate= new Date();
date.innerText= dateManage(todayDate);
if(weatherType.textContent== 'Clear'){
document.body.style.backgroundImage= "url('images/clear.jpg')";
}
else if(weatherType.textContent== 'Clouds'){
document.body.style.backgroundImage= "url('images/cloud.jpg')";
}
else if(weatherType.textContent== 'Mist'){
document.body.style.backgroundImage= "url('images/mist.jpg')";
}
else if(weatherType.textContent== 'Haze'){
document.body.style.backgroundImage= "url('images/haze.jpg')";
}
else if(weatherType.textContent== 'Rain'){
document.body.style.backgroundImage= "url('images/rain.jpg')";
}
else if(weatherType.textContent== 'Snow'){
document.body.style.backgroundImage= "url('images/snow.jpg')";
}
else if(weatherType.textContent== 'Thunderstorm'){
document.body.style.backgroundImage= "url('images/thunderstorm.jpg')";
}
else if(weatherType.textContent== 'Sunny'){
document.body.style.backgroundImage= "url('images/sunny.jpg')";
}
}
//Manage Date
function dateManage(dateArg){
let days= ["Sunday", "Monday", "Tuesday", "Wednesday", "Thrusday", "Friday", "Saturday"];
let months=["januray", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November","December"];
let year= dateArg.getFullYear();
let month= months[dateArg.getMonth()];
let date= dateArg.getDate();
let day= days[dateArg.getDay()];
return `${day} ${date} ${month}, ${year}`;
}