forked from Wilson0406/Weather-App
-
Notifications
You must be signed in to change notification settings - Fork 1
/
main.js
111 lines (94 loc) · 4.07 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
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
let weather = {
"api-key" : "YOUR-API-KEY",
fetchWeather: function (city) {
fetch(
'https://api.openweathermap.org/data/2.5/weather?q='
+ city
+ '&appid='
+ this["api-key"]
+ "&units=metric"
)
.then((response) => response.json())
.then((data) => this.displayWeather(data));
},
displayWeather: function(data) {
const { name } = data;
const { country } = data.sys;
const { icon, description } = data.weather[0];
const { temp, humidity, feels_like, pressure, temp_min, temp_max } = data.main;
const { speed } = data.wind;
console.log(name, icon, description, temp, humidity, speed);
document.getElementById("city").innerHTML = name + ", " + country;
document.querySelector(".icon").src = "https://openweathermap.org/img/wn/" + icon + "@4x.png";
document.getElementById("description").innerHTML = description;
document.getElementById("temp").innerHTML = temp + "°";
document.getElementById("feels").innerHTML = "Feels like: " + feels_like + "°C";
document.getElementById("pressure").innerHTML = "Pressure : " + pressure + " mb";
document.getElementById("max").innerHTML = "Maximum: " + temp_max + "°C";
document.getElementById("min").innerHTML = "Minimum: " + temp_min + "°C";
document.getElementById("humidity").innerHTML = "Humidity: " + humidity + "%";
document.getElementById("wind").innerHTML = "Wind Speed: " + speed + " km/h";
document.querySelector(".weather").classList.remove('loading');
document.body.style.backgroundImage = "url('https://source.unsplash.com/1600x900/?"+ name + "')";
},
search: function () {
this.fetchWeather(document.getElementById('search-bar').value);
}
};
let geocode = {
reverseGeocode: function (latitude, longitude) {
var api_key = 'YOUR-GEOCODE-API';
var api_url = 'https://api.opencagedata.com/geocode/v1/json'
var request_url = api_url
+ '?'
+ 'key=' + api_key
+ '&q=' + encodeURIComponent(latitude + ',' + longitude)
+ '&pretty=1'
+ '&no_annotations=1';
// see full list of required and optional parameters:
// https://opencagedata.com/api#forward
var request = new XMLHttpRequest();
request.open('GET', request_url, true);
request.onload = function() {
// see full list of possible response codes:
// https://opencagedata.com/api#codes
if (request.status === 200){
// Success!
var data = JSON.parse(request.responseText);
console.log(data.results[0].components.state); // print the location
weather.fetchWeather(data.results[0].components.state);
} else if (request.status <= 500){
// We reached our target server, but it returned an error
console.log("unable to geocode! Response code: " + request.status);
var data = JSON.parse(request.responseText);
console.log('error msg: ' + data.status.message);
} else {
console.log("server error");
}
};
request.onerror = function() {
// There was a connection error of some sort
console.log("unable to connect to server");
};
request.send(); // make the request
},
geolocation: function () {
function success(data) {
geocode.reverseGeocode(data.coords.latitude, data.coords.longitude);
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, console.error);
} else {
weather.fetchWeather('Delhi');
}
}
};
document.getElementById('search-btn').addEventListener('click', function () {
weather.search();
});
document.getElementById('search-bar').addEventListener('keyup', function(event) {
if(event.key == "Enter"){
weather.search();
}
});
geocode.geolocation();