Lern-Fabrik

Wetterabfrage - Anleitung für Schüler

Wetterapp-Vorlage Hilfestellungen

Ziel

Wir erstellen eine einfache Anwendung, um das Wetter für eine eingegebene Stadt abzurufen.

Benötigte Materialien

API-Schlüssel anfordern

Besuche die OpenWeatherMap Webseite und registriere dich für ein kostenloses Konto. Nach der Anmeldung erhältst du einen API-Schlüssel.

HTML-Grundstruktur erstellen

Erstelle eine Datei namens index.html und füge den folgenden Code ein:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wetterabfrage</title>
    <style>
        body {
            padding: 20px;
        }
        #weather-output {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="text-center">Wetterabfrage</h1>
        <div class="form-group">
            <label for="city-input">Stadt eingeben</label>
            <input type="text" class="form-control" id="city-input" placeholder="Stadt eingeben">
        </div>
        <button class="btn btn-primary btn-block" onclick="fetchWeather()">Wetter abrufen</button>
        <div id="weather-output" class="alert alert-info mt-3" style="display: none;"></div>
    </div>

    <script>
        function fetchWeather() {
            const city = document.getElementById('city-input').value;
            const apiKey = 'Ihr_API_Schlüssel'; // API-Schlüssel hier einfügen
            const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric&lang=de`;

            fetch(apiUrl)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Netzwerkantwort war nicht ok');
                    }
                    return response.json();
                })
                .then(data => {
                    displayWeather(data);
                })
                .catch(error => console.error('Fehler:', error));
        }

        function displayWeather(data) {
            const weatherOutput = document.getElementById('weather-output');
            if (data && data.weather && data.main) {
                weatherOutput.innerHTML = `
                    <h2>Wetter in ${data.name}</h2>
                    <p>Temperatur: ${data.main.temp} °C</p>
                    <p>Beschreibung: ${data.weather[0].description}</p>
                `;
                weatherOutput.style.display = 'block'; // Ausgabe anzeigen
            } else {
                weatherOutput.innerHTML = `<p>Stadt nicht gefunden.</p>`;
                weatherOutput.style.display = 'block'; // Ausgabe anzeigen
            }
        }
    </script>

</body>
</html>

Wie es funktioniert

Erklärungen
Datenanzeige: Im displayWeather-Teil der Funktion wird die Ausgabe der Wetterdaten jetzt korrekt formatiert.
Die Variablen ${data.name}, ${data.main.temp} und ${data.weather[0].description} zeigen den Namen der Stadt, die Temperatur und die Wetterbeschreibung an.
Bootstrap-Stil: Die Benutzeroberfläche bleibt einfach und ansprechend dank Bootstrap, das für Stil und Layout verwendet wird.
Fehlerbehandlung: Falls die Stadt nicht gefunden wird, wird eine entsprechende Nachricht angezeigt.
Verwendung
Stelle sicher, dass du deinen API-Schlüssel in die JavaScript-Funktion einfügst. Speichere die Datei als index.html und öffne sie in einem Webbrowser, um die Wetterabfrage zu testen.

Testen der Anwendung

  1. Speichere die Datei als index.html.
  2. Öffne die Datei in deinem Webbrowser.
  3. Gib eine Stadt ein und klicke auf „Wetter abrufen“.
  4. Die Wetterdaten werden angezeigt.

Zusätzliche Hinweise

Achte darauf, deinen API-Schlüssel korrekt einzugeben. Wenn die Stadt nicht gefunden wird, überprüfe die Eingabe auf Tippfehler.

Erweiterung

Wetter in ${data.name}

Temperatur: ${data.main.temp} °C

Minimale Temperatur: ${data.main.temp_min} °C

Maximale Temperatur: ${data.main.temp_max} °C

Beschreibung: ${data.weather[0].description}

Windstärke: ${data.wind.speed} m/s

Luftdruck: ${data.main.pressure} hPa

Feuchtigkeit: ${data.main.humidity} %

Sonnenaufgang: ${sunrise}

Sonnenuntergang: ${sunset}