-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
116 lines (94 loc) · 5.89 KB
/
app.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
112
113
114
115
116
//-------------------- Variables Declared on Global Level --------------------
let access = document.getElementById('access');
let allDetails;
let city;
let icon;
//-------------------- Variables Declared on Global Level --------------------
//-------------------------------------------------- Weather Using Location --------------------------------------------------
//-------------------- Function Running Two Parameters (onSuccess, onError) --------------------
window.onload = function getLocation() {
if (navigator.geolocation) {
access.innerHTML = "Allow to detect your location"
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
else {
access.innerHTML = "Geolocation is not supported by this browser."
}
}
//-------------------- Function Running Two Parameters (onSuccess, onError) --------------------
//-------------------- onSuccess Parameter --------------------
function onSuccess(position) {
access.innerHTML = "Detecting your location...";
let { latitude, longitude } = position.coords;
//-------------------- Fetching Location Using API --------------------
fetch(`https://api.opencagedata.com/geocode/v1/json?q=${latitude}+${longitude}&key=e228ae2eaf8f4751afb78f864bdf52ea`)
.then(response => response.json()).then(result => {
allDetails = result.results[0].components;//getting the details of the location
console.table(allDetails);
let { city } = allDetails;//getting the details of the location
city = city;
access.innerHTML = "";
//-------------------- Fetching Location Using API --------------------
//-------------------- Fetching Weather Using API --------------------
axios.get(`https://api.weatherapi.com/v1/current.json?key=92203d8e3c314335b7462722223006&q=${city}`)
.then(function (response) {
console.log(response.data);
//-------------------- Weather Icon --------------------
icon = response.data.current.condition.icon;
icon.replace("/file// ");
// console.log(icon);
document.getElementById('icon').src = icon;
//-------------------- Weather Icon --------------------
document.getElementById('real-title').innerHTML = 'Real Feel';
document.getElementById('humidity-title').innerHTML = 'Humidity';
document.getElementById('visibility-title').innerHTML = 'Visibility';
document.getElementById('wind-title').innerHTML = `${response.data.current.wind_dir} Wind`;
document.getElementById('city').innerHTML = `<i id="city_location" class="fa-solid fa-location-dot"></i>${response.data.location.name}`;
document.getElementById('temp-f').innerHTML = response.data.current.temp_c + "°C";
document.getElementById('condition').innerHTML = response.data.current.condition.text;
document.getElementById('feel').innerHTML = response.data.current.feelslike_c + '°C';
document.getElementById('wind').innerHTML = response.data.current.wind_kph + " km/h";
document.getElementById('humidity').innerHTML = response.data.current.humidity + "%";
document.getElementById('visibility').innerHTML = response.data.current.vis_km + " km";
})
//-------------------- Fetching Weather Using API --------------------
});
access.innerHTML = "";
}
//-------------------- onError Parameter --------------------
function onError(error) {
console.log(error);
if (error.code == 1) {//if user denied to share location
access.innerHTML = "User denied the request for Geolocation.";
}
else if (error.code == 2) {//if location is not found
access.innerHTML = "Location information is unavailable.";
}
else if (error.code == 3) {//if any other error occured
access.innerHTML = "Something went wrong.";
}
}
//-------------------- onError Parameter --------------------
//-------------------------------------------------- Weather Using Location --------------------------------------------------
//-------------------------------------------------- Weather Using Search --------------------------------------------------
function getWeather() {
let input_city = document.getElementById('input_city').value;
console.log(input_city);
axios.get(`https://api.weatherapi.com/v1/current.json?key=92203d8e3c314335b7462722223006&q=${input_city}`)
.then(function (response) {
console.log(response.data);
document.getElementById('real-title').innerHTML = 'Real Feel';
document.getElementById('humidity-title').innerHTML = 'Humidity';
document.getElementById('visibility-title').innerHTML = 'Visibility';
document.getElementById('wind-title').innerHTML = `${response.data.current.wind_dir} Wind`;
document.getElementById('city').innerHTML = `<i id="city_location" class="fa-solid fa-location-dot"></i>${response.data.location.name}`;
document.getElementById('temp-f').innerHTML = response.data.current.temp_c + "°C";
document.getElementById('condition').innerHTML = response.data.current.condition.text;
document.getElementById('feel').innerHTML = response.data.current.feelslike_c + '°C';
document.getElementById('wind').innerHTML = response.data.current.wind_kph + " km/h";
document.getElementById('humidity').innerHTML = response.data.current.humidity + "%";
document.getElementById('visibility').innerHTML = response.data.current.vis_km + " km";
})
access.innerHTML = "";
}
//-------------------------------------------------- Weather Using Search --------------------------------------------------