58 lines
1.7 KiB
JavaScript
58 lines
1.7 KiB
JavaScript
const iconElement = document.querySelector('.weather-icon');
|
|
const tempElement = document.querySelector('.temperature-value p');
|
|
const descElement = document.querySelector('.temperature-description p');
|
|
|
|
// App data
|
|
const weather = {};
|
|
weather.temperature = {
|
|
unit: 'celsius',
|
|
};
|
|
|
|
// Change to 'F' for Fahrenheit
|
|
var tempUnit = 'C';
|
|
|
|
const KELVIN = 273.15;
|
|
// Use your own key for the Weather, Get it here: https://openweathermap.org/
|
|
const key = 'aa5b0a76dfbf87441928fb3cc32d3d68';
|
|
|
|
// Set Position function
|
|
setPosition();
|
|
|
|
function setPosition(position) {
|
|
// Here you can change your position
|
|
// You can use https://www.latlong.net/ to get it! (I use San Francisco as an example)
|
|
let latitude = 37.774929;
|
|
let longitude = -122.419418;
|
|
|
|
getWeather(latitude, longitude);
|
|
}
|
|
|
|
// Get the Weather data
|
|
function getWeather(latitude, longitude) {
|
|
let api = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${key}`;
|
|
|
|
console.log(api);
|
|
|
|
fetch(api)
|
|
.then(function (response) {
|
|
let data = response.json();
|
|
return data;
|
|
})
|
|
.then(function (data) {
|
|
let celsius = Math.floor(data.main.temp - KELVIN);
|
|
weather.temperature.value = (tempUnit == 'C') ? celsius : (celsius * 9/5) + 32;
|
|
weather.description = data.weather[0].description;
|
|
weather.iconId = data.weather[0].icon;
|
|
})
|
|
.then(function () {
|
|
displayWeather();
|
|
});
|
|
}
|
|
|
|
// Display Weather info
|
|
function displayWeather() {
|
|
iconElement.innerHTML = `<img src="icons/${weather.iconId}.png"/>`;
|
|
tempElement.innerHTML = `${weather.temperature.value}°<span>${tempUnit}</span>`;
|
|
descElement.innerHTML = weather.description;
|
|
}
|