This repository has been archived by the owner on Nov 24, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
63 lines (56 loc) · 2.2 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
window.addEventListener("load", () => {
let long;
let lat;
let temperatureDescription = document.querySelector(
".temperature-description"
);
let temperatureDegree = document.querySelector(".temperature-degree");
let locationTimezone = document.querySelector(".location-timezone");
let temperatureSection = document.querySelector(".temperature");
let temperatureSpan = document.querySelector(".temperature span");
//Requires geoLocation to track your current location
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(postion => {
long = postion.coords.longitude;
lat = postion.coords.latitude;
//Access the api from proxy
const proxy = "https://cors-anywhere.herokuapp.com/";
//Your API goes here
const api = `${proxy}[your API here]${lat},${long}`;
fetch(api)
.then(response => {
return response.json();
})
.then(data => {
//Logs the data you can find it in the browser's console.
console.log(data);
const { temperature, summary, icon } = data.currently;
//Set DOM elements from API
temperatureDegree.textContent = temperature;
temperatureDescription.textContent = `Status - ${summary}`;
locationTimezone.textContent = data.timezone;
//Formula For Celsius
let celsius = (temperature - 32) * (5 / 9);
//Set Icons
setIcons(icon, document.querySelector(".icon"));
//Change degree to Celsius/Farheneit
temperatureSection.addEventListener("click", () => {
if (temperatureSpan.textContent === "°F") {
temperatureSpan.textContent = "°C";
temperatureDegree.textContent = Math.floor(celsius * 10) / 10;
} else {
temperatureSpan.textContent = "°F";
temperatureDegree.textContent = temperature;
}
});
});
});
//function of setIcons
function setIcons(icon, iconID) {
const skycons = new Skycons({ color: "white" });
const currentIcon = icon.replace(/-/g, "_").toUpperCase();
skycons.play();
return skycons.set(iconID, Skycons[currentIcon]);
}
}
});