Meine Reaktionsreise: Tag 13

Project O'Clock:Wetter-App

Heute habe ich eine einfache Wetter-App erstellt, die Echtzeit-Wetterdaten von der OpenWeather-API abruft. Die App ermöglicht Benutzern die Suche nach einer Stadt und zeigt wichtige Wetterinformationen wie Temperatur, Luftfeuchtigkeit, Windgeschwindigkeit und Wetterbedingungen an.

Schlüsselcode-Highlights

1. API-Details Die App verwendet die OpenWeather-API mit metrischen Einheiten für die Temperatur.

const apiKey = "789b1d530**********"; 
const apiUrl = "https://api.openweathermap.org/data/2.5/weather?&units=metric&q=";

2.Abfrageselektoren
Diese Elemente verbinden die HTML-Struktur mit JavaScript:

const searchBox = document.querySelector(".search input");
const searchBtn = document.querySelector(".search button");
const weatherIcon = document.querySelector(".weather-icon");

3.Wetterdaten abrufen
Die Funktion checkWeather() sendet eine API-Anfrage und verarbeitet die Antwort.

async function checkWeather(city) {
    const response = await fetch(apiUrl + city + `&appid=${apiKey}`);

    if (response.status == 404) {
        document.querySelector(".error").style.display = "block";
        document.querySelector(".weather").style.display = "none";
    } else {
        const data = await response.json();

        // Updating Weather Information
        document.querySelector(".city").innerHTML = data.name;
        document.querySelector(".temp").innerHTML = Math.round(data.main.temp) + "°c";
        document.querySelector(".humidity").innerHTML = data.main.humidity + "%";
        document.querySelector(".wind").innerHTML = data.wind.speed + " km/hr";

        // Dynamic Weather Icon Update
        if (data.weather[0].main == "Clouds") {
            weatherIcon.src = "images/clouds.png";
        } else if (data.weather[0].main == "Rain") {
            weatherIcon.src = "images/rain.png";
        } else if (data.weather[0].main == "Clear") {
            weatherIcon.src = "images/clear.png";
        } else if (data.weather[0].main == "Drizzle") {
            weatherIcon.src = "images/drizzle.png";
        } else if (data.weather[0].main == "Mist") {
            weatherIcon.src = "images/mist.png";
        }

        document.querySelector(".weather").style.display = "block";
        document.querySelector(".error").style.display = "none";
    }
}

4.Ereignis-Listener für die Suche
Dies fügt der Suchschaltfläche Interaktivität hinzu:

searchBtn.addEventListener("click", () => {
    checkWeather(searchBox.value);
});

Was ich gelernt habe

1. API-Integration:

Daten mit fetch() abrufen und die Antwort mit async/await verarbeiten.
Wichtigkeit der sicheren Verwaltung von API-Schlüsseln (dieser Schlüssel dient nur zu Testzwecken).

2.Fehlerbehandlung:

Anzeige einer Fehlermeldung, wenn eine ungültige Stadt eingegeben wird oder die API-Anfrage fehlschlägt.

3.Dynamische UI-Updates:
Dynamische Aktualisierung des Inhalts auf der Seite basierend auf API-Daten.
Bedingtes Rendern für verschiedene Wettersymbole.

4.CSS & Reaktionsfähigkeit:

Die App verwendet eine einfache kartenbasierte Benutzeroberfläche. Zur Verwaltung von Layout und Design wurde eine separate Datei „styles.css“ verwendet.

5.JavaScript DOM-Manipulation:
Verwendung von querySelector und innerHTML zur Interaktion mit den HTML-Elementen.

Abschließende Gedanken
Die Entwicklung dieser Wetter-App war spannend und hat mein Wissen über JavaScript, API-Aufrufe und DOM-Manipulation gestärkt. Im weiteren Verlauf freue ich mich darauf, solche Projekte für einen stärker komponentenbasierten Ansatz in React zu überführen. ?

Das obige ist der detaillierte Inhalt vonMeine Reaktionsreise: Tag 13. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!