-
Notifications
You must be signed in to change notification settings - Fork 1
/
app.js
78 lines (67 loc) · 2.87 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
window.addEventListener('load', ()=>{
// let is the same as var
let long;
let lat;
let tempdesc = document.querySelector('.temp-desc');
let degree = document.querySelector('.degree');
let timezone = document.querySelector('.time-zone');
let temp = document.querySelector('.temp');
const spanSection = document.querySelector('.temp span')
// check if broswer supports geoloaction
if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(position => {
// get the longititude and the latitude
long = position.coords.longitude;
lat = position.coords.latitude;
// create a constant variable
// cos problem solve to access location using localhost
// note: replace this dark.sky.api.key with the api key generated with your account
const proxy = 'https://cors-anywhere.herokuapp.com/';
const api = `${proxy}https://dark.sky.api.key/${lat},${long}`;
// fetch the data
fetch(api)
.then( response => {
// convert it to json
return response.json();
})
// fetch now the real data
.then( data => {
console.log(data);
// pull out the information from the data object
const {temperature, summary, icon} = data.currently;
// set all the need information
degree.textContent = temperature;
tempdesc.textContent = summary;
timezone.textContent = data.timezone;
// formular for celcius
let celcius = (temperature -32) * (5/9);
// set icon
setIcon(icon, document.querySelector('.icon'));
// add an event listener on the temp
temp.addEventListener('click', ()=>{
// check if the text content is f
if(spanSection.textContent ==="f")
{
spanSection.textContent= "c";
degree.textContent = celcius;
}
else
{
spanSection.textContent = "f";
degree.textContent = temperature;
}
})
});
});
}
// function to set icon
function setIcon(icon, iconID)
{
// const for skyicons
const skycons = new Skycons({color: "white"});
const currentIcon = icon.replace(/-/g, "_").toUpperCase(); // replace with underscore instead of -
skycons.play();
return skycons.set(iconID, Skycons[currentIcon]);
}
})