Hi Leute,
ich sitze seit ca. 4 Stunden an einem Javascript von einem Wetter Widget und bekomme es einfach nicht hin. Mit html und Css komm ich halbwegs klar aber bei Java hab ich Schwierigkeiten...
Kurz erklärt: Ich habe ein Wetter Widget mit automatischer Standort-Abfrage. Ich möchte das Widget aber nun fest auf meiner Webseite integrieren und nur das Wetter von meinem Wohnort dort anzeigen lassen (hab auf meiner Webseite Vogefutter-Livestreams aus meinem Garten und die Leute sollen die Temperaturen im Garten sehen können)...
html-seminar.de/woltlab/attachment/2283/
Die Location-Abfrage soll also raus und das Widget soll direkt das Wetter ohne Abfrage vom eingetragenen Standort anzeigen (Recke, Deutschland - siehe openweathermap-Link).
// SELECT ELEMENTS
const iconElement = document.querySelector(".weather-icon");
const tempElement = document.querySelector(".temperature-value p");
// App data
const weather = {};
weather.temperature = {
unit : "celsius"
}
// CHECK IF BROWSER SUPPORTS GEOLOCATION
if('geolocation' in navigator){
navigator.geolocation.getCurrentPosition(setPosition, showError);
}else{
notificationElement.style.display = "block";
notificationElement.innerHTML = "<p>Browser doesn't Support Geolocation</p>";
}
// SET USER'S POSITION
function setPosition(position){
let latitude = position.coords.latitude;
let longitude = position.coords.longitude;
getWeather(latitude, longitude);
}
// SHOW ERROR WHEN THERE IS AN ISSUE WITH GEOLOCATION SERVICE
function showError(error){
notificationElement.style.display = "block";
notificationElement.innerHTML = `<p> ${error.message} </p>`;
}
// GET WEATHER FROM API PROVIDER
function getWeather(latitude, longitude){
fetch(`http://api.openweathermap.org/data/2.5/weather?q=Recke,ger&appid=${"82005d27a116c2880c8f0fcb866998a0"}`)
.then(function(response){
let data = response.json();
return data;
})
.then(function(data){
weather.temperature.value = Math.floor(data.main.temp - 273);
weather.description = data.weather[0].description;
weather.iconId = data.weather[0].icon;
weather.city = data.name;
weather.country = data.sys.country;
})
.then(function(){
displayWeather();
});
}
// DISPLAY WEATHER TO UI
function displayWeather(){
iconElement.innerHTML = `<img src="icons/${weather.iconId}.png"/>`;
tempElement.innerHTML = `${weather.temperature.value}°<span>C</span>`;
}
Alles anzeigen
Wie gesagt, hab ich schon versucht die Abfrage raus zunehmen - dann funktionierte aber das ganze Widget nicht mehr. Ich mach also irgendwas falsch.
Kann mir da jemand weiterhelfen? Bin für jede noch zu kleine Hilfe sehr dankbar.
Gruß Thomas