Meine erste Wetter-App

async function searchWeather(term) {
    var response = await fetch(`https://api.weatherapi.com/v1/forecast.json?key=7d77b96c972b4d119a3151101212704&q=${term}&days=3`);
    if (response.ok && response.status !== 400) {
        let weatherData = await response.json();
        displayCurrent(weatherData.location, weatherData.current);
        displayForecast(weatherData.forecast.forecastday);
    }
}

document.getElementById('search').addEventListener('keyup', function (event) {
    searchWeather(event.target.value);
});

document.getElementById('searchBtn').addEventListener('click', function() {
    let searchTerm = document.getElementById('search').value;
    searchWeather(searchTerm);
});

Funktion displayCurrent(location, currentWeather) {
    if (aktuelles Wetter) {
        let lastUpdatedDate = new Date(currentWeather.last_updated);
        let cardHTML = `
            <div>



<p>Diese Funktion generiert eine Karte, die die aktuelle Temperatur, die Wetterbedingungen und zusätzliche Details wie Windgeschwindigkeit und Luftfeuchtigkeit anzeigt. Es aktualisiert die Seite dynamisch, indem es den generierten HTML-Code in das DOM einfügt.</p>


<hr>

<ol>
<li>Anzeige der 3-Tages-Vorhersage</li>
</ol>

<p>Als nächstes zeige ich die Wettervorhersage für die nächsten drei Tage. Dies wird von der Funktion displayForecast() erledigt:<br>
</p><pre class="brush:php;toolbar:false">Funktion displayForecast(forecastData) {
    let ForecastHTML = '';
    for (let i = 1; i < ForecastData.length; i ) {
        PrognoseHTML = `
            <div>



<p>Diese Funktion durchläuft die Vorhersagedaten und generiert Karten für jeden der nächsten zwei Tage, die die Höchst- und Mindesttemperaturen, Wetterbedingungen und Symbole anzeigen.</p>


<hr>

<p>Fazit</p>

<p>Das Erstellen dieser Wetter-App war eine großartige Übung für mich, da ich gelernt habe, wie man mit APIs interagiert, JSON-Daten verarbeitet und eine Webseite dynamisch aktualisiert. Das Projekt hat mir geholfen, mein Wissen über asynchrones JavaScript, DOM-Manipulation und Ereignisbehandlung zu festigen.</p>

<p>Wenn Sie gerade erst mit JavaScript und APIs beginnen, ist diese Wetter-App eine einfache, aber leistungsstarke Möglichkeit, Ihre Fähigkeiten zu üben. Sie können dieses Projekt erweitern, indem Sie weitere Funktionen wie Fehlerbehandlung, detailliertere Prognosen oder sogar einen Dunkelmodus für die Benutzeroberfläche hinzufügen.</p>


<hr>

<p>Probieren Sie den Code gerne aus und passen Sie ihn an Ihre Bedürfnisse an. Lassen Sie mich wissen, wenn Sie Fragen oder Anregungen haben!</p>