Beiträge von Dreamer84

Dreamer84 · 30. März 2020

Ich glaube es geht!!!!!!!!!!!!!!!

MEGA!

Ich danke dir wie verrückt.
Ich schreib dir mal kurz ne PM

Dreamer84 · 30. März 2020

Ok

Ich habe aktuell dieses Javaskript

Code

<script>
        // App data
        const weather = {};
        weather.temperature = {
            unit: "celsius"
        }
        // GET WEATHER FROM API PROVIDER
        function getWeather() {
            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>`;
        }
        getWeather();
    </script>

Alles anzeigen

und die html, ist diese hier:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Weather App - JavaScript</title>
    <link rel="stylesheet" href="font/Rimouski.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div class="container">
        <div class="app-title">
            <p>Recke</p>
        </div>
        <div class="weather-container">
            <div class="weather-icon">
                <img src="icons/unknown.png" alt="">
            </div>
            <div class="temperature-value">
                <p>- °<span>C</span></p>
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html>

Alles anzeigen

Dank dir

Dreamer84 · 30. März 2020

Ich habs geändert aber die Wetterdaten werden nicht angezeigt...

html-seminar.de/woltlab/attachment/2284/

Soll ich den Code von der html oder css mal mit zeigen? In meinem ersten Post kamen die Daten noch an (nach der akzeptierten Standortabfrage).

Woran kann es liegen?

Danke nochmal für deine Zeit

Dreamer84 · 30. März 2020

Hallo Sempervivum,

erstmal vielen vielen Dank für deine Antwort und deine Zeit.
Mein Code ist leider noch mit Standort-Abfrage, weil ich sie nicht raus bekomme ohne dass alles "kaputt" geht.

Ich habe deinen Code gerade ausprobiert. Die Standort-Abfrage ist zwar weg aber die Wetter-Anzeige bleibt leer
Hast du da noch ne Idee?

Dreamer84 · 29. März 2020

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).

Code

// 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

Beiträge von Dreamer84

Wetter Widget ohne Standort-Abfrage

Wetter Widget ohne Standort-Abfrage

Wetter Widget ohne Standort-Abfrage

Wetter Widget ohne Standort-Abfrage

Wetter Widget ohne Standort-Abfrage