Wie integriere ich einen Standortwechsel für die Wetteranzeige per Benutzereingabe?
Funktionsweise der Standortänderung per Benutzereingabe
Um den Standort zu wechseln und das Wetter für einen neuen Ort anzuzeigen, binden wir ein Texteingabefeld ein, in dem der Benutzer den Wunschort eingeben kann. Nach der Eingabe triggert ein Button oder das Absenden des Formulars eine Funktion, die daraufhin das Wetter für den eingegebenen Ort abfragt und in der Benutzeroberfläche aktualisiert.
Technische Umsetzung
Zuerst benötigen wir eine Möglichkeit, den Ort einzugeben. Hierbei nutzen wir ein einfaches Formular mit einem Textfeld und einem Button. Ergänzend implementieren wir JavaScript-Code, der beim Absenden des Formulars ein Ereignis abfängt, die Eingabe ausliest, eine externe Wetter-API aufruft und die erhaltenen Wetterdaten anzeigt. Eine zentrale Herausforderung besteht darin, eine geeignete API zu verwenden, die Wetterdaten anhand eines Ortsnamens liefert, etwa die OpenWeatherMap API. Für diese müssen Sie meist einen API-Schlüssel beantragen.
Beispielcode
Bitte geben Sie einen Ort ein und klicken Sie auf Wetter anzeigen.
Diese HTML-Seite erklärt zunächst theoretisch den Ansatz, bindet dann ein Formular mit einem Texteingabefeld und Button ein und zeigt mittels JavaScript und der OpenWeatherMap-API das Wetter für den eingegebenen Standort an. Die Wettereingabe kann beliebig geändert werden, und bei einer gültigen Eingabe wird das aktuelle Wetter ersetzt und angezeigt. Fehler wie ungültige Orte werden dem Benutzer ebenfalls angezeigt.
Bitte ersetzen Sie `DEIN_API_SCHLÜSSEL_HIER` durch Ihren eigenen API-Schlüssel von OpenWeatherMap, den Sie nach einer kostenlosen Registrierung erhalten können.