Wie kann ich das Wetter-Icon dynamisch anhand der aktuellen Bedingungen ändern?

Das Beispiel zeigt, wie man ein Wetter-Icon dynamisch anhand der aktuellen Wetterbedingungen ändern kann. Zunächst gibt es eine einfache Funktion `getWeatherIcon`, die anhand eines Textes (z.B. "klarer Himmel", "bewölkt", "leichter Regen") ein passendes Emoji zurückliefert. Das kann man natürlich auch anpassen oder erweitern – zum Beispiel durch eigene Icons oder SVG-Grafiken.

Die eigentlichen Wetterdaten werden per JavaScript über eine externe API geholt – hier beispielhaft von OpenWeatherMap. Dafür muss man sich dort registrieren und einen API-Key anfordern. Die API liefert JSON mit Informationen zum aktuellen Wetter. Aus dem Feld `weather .description` wird die Beschreibung herausgezogen, aus der dann das passende Icon ermittelt wird. Die Temperatur wird direkt angezeigt.

Damit kann bei jedem erneuten Laden der Seite oder periodischen Updates das Icon immer zur aktuellen Wetterlage passen. Natürlich kann man in einem echten Projekt das Icon auch aufwendiger gestalten und z.B. animierte SVGs oder Iconfont verwenden.

Falls Du keine externe API nutzen möchtest, könntest Du auch lokal definierte Bedingungen simulieren oder eine andere Datenquelle verwenden.