-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
84 lines (67 loc) · 2.95 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
let appId = "f590c7393c5b01888a17b4a29609d12d";
let units = "imperial";
let searchMethod;
function getSearchMethod(searchTerm) {
if(searchTerm.length === 5 && Number.parseInt(searchTerm) + "" === searchTerm)
searchMethod = "zip";
else
searchMethod = "q";
}
function searchWeather(searchTerm) {
getSearchMethod(searchTerm);
fetch(`http://api.openweathermap.org/data/2.5/weather?${searchMethod}=${searchTerm}&APPID=${appId}&units=${units}`).then(result =>{
return result.json();
}).then(result =>{
init(result);
})
}
function init(resultFromServer){
switch (resultFromServer.weather[0].main) {
case "Clear":
document.body.style.backgroundImage = 'url("clear.jpg")';
break;
case "Clouds":
document.body.style.backgroundImage = 'url("cloudy.jpg")';
break;
case "Rain":
case "Drizzle":
case "Mist":
document.body.style.backgroundImage = 'url("rain.jpg")';
break;
case "Thunderstorm":
document.body.style.backgroundImage = 'url("storm.jpg")';
break;
case "Snow":
document.body.style.backgroundImage = 'url("snow.jpg")';
break;
default:
break;
}
let weatherDescriptionHeader = document.getElementById("weatherDescriptionHeader");
let temperatureElement = document.getElementById("temperature");
let humidityElement = document.getElementById("humidity");
let windSpeedElement = document.getElementById("windSpeed");
let cityHeader = document.getElementById("cityHeader");
let weatherIcon = document.getElementById("documentIconImg");
weatherIcon.src = 'http://openweathermap.org/img/w/' + resultFromServer.weather[0].icon + '.png'
let resultDescription = resultFromServer.weather[0].description;
weatherDescriptionHeader.innerText = resultDescription.charAt(0).toUpperCase() + resultDescription.slice(1);
temperatureElement.innerHTML = Math.floor(resultFromServer.main.temp) + '°';
windSpeedElement.innerHTML = 'Winds at ' + Math.floor(resultFromServer.wind.speed) + 'm/s';
cityHeader.innerHTML = resultFromServer.name;
humidityElement.innerHTML = 'Humidity levels at ' + resultFromServer.main.humidity + '%';
setPostionForWeatherInfo();
}
function setPostionForWeatherInfo() {
let weatherContainer = document.getElementById('weatherContainer');
let weatherContainerHeight = weatherContainer.clientHeight;
let weatherContainerWidth = weatherContainer.Width;
weatherContainer.style.left = `calc(50% - ${weatherContainerWidth/2}px)`;
weatherContainer.style.top = `calc(50% - ${weatherContainerHeight/1.3}px)`;
weatherContainer.style.visibility = 'visible';
}
document.getElementById("searchBtn").addEventListener("click" , () => {
let searchTerm = document.getElementById("searchInput").value;
if(searchTerm)
searchWeather(searchTerm);
})