fberger/brabetz-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make weather widget dynamic using Open-Meteo API

Browse Source
This commit is contained in:
Felix Brabetz
2026-05-16 05:22:51 +02:00
parent ab49d69523
commit 0545007970
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Hero.astro
+4 -4
View File
@@ -31,11 +31,11 @@
</span> </span>
<!-- Live Status / Weather Widget --> <!-- Live Status / Weather Widget -->
<div class="mb-4 text-xs font-mono text-stone-500 flex justify-center items-center gap-2"> <div class="mb-4 text-xs font-mono text-stone-500 flex justify-center items-center gap-2" x-data="{ temp: '...', icon: 'fa-cloud-sun', text: 'Wird geladen...' }" x-init="fetch('https://api.open-meteo.com/v1/forecast?latitude=50.1&longitude=8.0&current_weather=true').then(r => r.json()).then(data => { temp = Math.round(data.current_weather.temperature) + '°C'; const code = data.current_weather.weathercode; if(code === 0) { icon = 'fa-sun'; text = 'Perfektes Wetter für Gartenarbeit!'; } else if(code < 4) { icon = 'fa-cloud-sun'; text = 'Gutes Wetter für den Trockenmauerbau.'; } else if(code < 60) { icon = 'fa-cloud'; text = 'Gedecktes Wetter, ideal zum Pflanzen.'; } else { icon = 'fa-cloud-showers-heavy'; text = 'Regnerisch. Zeit für Planung!'; } }).catch(() => { temp = '18°C'; icon = 'fa-cloud-sun'; text = 'Aktuell perfektes Wetter für den Trockenmauerbau.'; })">
<i class="fa-solid fa-cloud-sun text-emerald-400"></i> <i class="fa-solid" :class="icon + ' text-emerald-400'"></i>
<span>Rheingau-Taunus: 18°C</span> <span>Rheingau-Taunus: <span x-text="temp"></span></span>
<span class="text-stone-700">//</span> <span class="text-stone-700">//</span>
<span class="text-emerald-400">Aktuell perfektes Wetter für den Trockenmauerbau.</span> <span class="text-emerald-400" x-text="text"></span>
</div> </div>
<!-- Rain Detail Page Button --> <!-- Rain Detail Page Button -->