Zeig mir das: Daten in ein Widget verwandeln
Open-Meteo kann auch eine Vorhersage für die kommenden Tage liefern. Füge einfach hinzu, was du willst, in die Adresse:
https://api.open-meteo.com/v1/forecast?latitude=49.19&longitude=16.61&daily=temperature_2m_max,temperature_2m_min,weathercode&timezone=autoIn der Antwort findest du daily.time (eine Liste von Tagen), daily.temperature_2m_max und daily.temperature_2m_min (die höchsten und niedrigsten Temperaturen). Gleiche Reihenfolge = der erste Tag passt zur ersten Temperatur.
Dann baust du das Widget in einer Schleife:
<div id="pocasi" class="pocasi-widget"></div>
<script type="module">
const adresa = 'https://api.open-meteo.com/v1/forecast?latitude=49.19&longitude=16.61&daily=temperature_2m_max,temperature_2m_min&timezone=auto';
const data = await (await fetch(adresa)).json();
const dny = data.daily.time;
const max = data.daily.temperature_2m_max;
const min = data.daily.temperature_2m_min;
let html = '';
for (let i = 0; i < 3; i++) {
const den = new Date(dny[i]).toLocaleDateString('en-US', { weekday: 'long' });
html += `<div class="den">
<strong>${den}</strong>
<span>${Math.round(min[i])}–${Math.round(max[i])} °C</span>
</div>`;
}
document.querySelector('#pocasi').innerHTML = html;
</script>Und ein bisschen CSS, damit es wie ein echtes Widget aussieht:
.pocasi-widget {
display: flex;
gap: 10px;
}
.pocasi-widget .den {
border: 1px solid #ddd;
border-radius: 12px;
padding: 12px 16px;
display: flex;
flex-direction: column;
align-items: center;
}Jetzt du 💪
Füge ein Wetter-Widget dort ein, wo es in deinem Projekt Sinn ergibt:
🏫 Schulwebsite – Lösung
Auf der Seite mit Schulevents: „Wetter für den Schulausflug.“ Setze die Koordinaten auf das Ziel – Kinder und Eltern freuen sich zu wissen, was sie einpacken sollen.
🙋 Persönliche Website – Lösung
Im Header oder Footer: Wetter in deiner Stadt als persönliche Note („It’s 18 °C here in my town today“).
🌍 Reisetagebuch – Lösung
Für jede geplante Reise ein Widget mit der Vorhersage am Ziel. Ändere einfach die Koordinaten für den Reiseort.
⚽ Vereinswebsite – Lösung
Auf der Spielseite: „Wetter fürs Samstagsspiel.“ Finde die Koordinaten des Platzes auf einer Karte. Bonus: Wenn Regen erwartet wird, zeige „Bring a raincoat!“
Woher bekomme ich Koordinaten? Auf einem Kartendienst Rechtsklick auf einen Ort → „What’s here?“ – die Koordinaten erscheinen oben.
Check: Deine Website hat ein Widget mit einer echten 3-Tage-Vorhersage, gestaltet passend zu deinem Design. Die Daten werden live von der API geladen.
Das nimmst du aus dieser Lektion mit
- Du sagst einer API-Adresse über den Teil nach dem Fragezeichen (Parameter), was du willst.
- Du baust Daten aus Listen mit einer
for-Schleife in HTML ein. - Zahlen in JSON werden zu einem echten Widget – das Design lieferst du.
© 2026 Ing. Martin Polak / AlgoRhino · Nutzungsbedingungen für Inhalte