← Alle Rezepte

Wetter-App: Stadt → Wetter in 30 Zeilen

Live-Vorschlag des Ortes via geoAPI, Wetter-Abruf via Open-Meteo (kostenfrei, kein API-Key nötig).

Live-Demo

Der komplette Code

<!DOCTYPE html>
<html lang="de">
<head><meta charset="utf-8"><title>Wetter</title></head>
<body>

  <input type="text" name="ort" data-geoapi-place
         data-geoapi-lat="ort_lat" data-geoapi-lon="ort_lon"
         placeholder="Ort eingeben">

  <div id="wetter"></div>

  <script src="https://geoapi.world/dist/geoapi-widget.js"></script>
  <script>
    document.querySelector('input[name=ort]').addEventListener('geoapi:select', async (e) => {
      const place = e.detail;
      const url = `https://api.open-meteo.com/v1/forecast`
                + `?latitude=${place.lat}&longitude=${place.lon}`
                + `&current_weather=true&timezone=${encodeURIComponent(place.timezone)}`;
      const data = await (await fetch(url)).json();
      const w = data.current_weather;
      document.getElementById('wetter').innerHTML =
        `<h2>${place.name}, ${place.country_code}</h2>
         <p style="font-size:2em">${w.temperature}°C</p>
         <p>Wind ${w.windspeed} km/h, ${w.time}</p>`;
    });
  </script>

</body></html>

Was hier passiert

  1. Place-Widget bietet Auto-Suggest. Sobald der Nutzer einen Ort wählt, feuert das Event geoapi:select mit allen Daten (lat, lon, timezone, country_code, name).
  2. Open-Meteo bekommt diese Koordinaten plus Zeitzone und liefert das aktuelle Wetter zurück.
  3. Anzeige in einem einfachen div.

Erweiterungs-Ideen