Mon parcours React : jour 13

Projet O'Clock : Application météo

Aujourd'hui, j'ai créé une application météo simple qui récupère les données météorologiques en temps réel à partir de l'API OpenWeather. L'application permet aux utilisateurs de rechercher une ville et affiche des informations météorologiques clés, telles que la température, l'humidité, la vitesse du vent et les conditions météorologiques.

Points forts des codes clés

1. Détails de l'API L'application utilise l'API OpenWeather avec des unités métriques pour la température.

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

2.Sélecteurs de requêtes
Ces éléments connectent la structure HTML avec JavaScript :

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

3.Récupération des données météorologiques
La fonction checkWeather() envoie une requête API et gère la réponse.

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.Écouteur d'événements pour la recherche
Cela ajoute de l'interactivité au bouton de recherche :

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

Ce que j'ai appris

1. Intégration API :

Récupération des données à l'aide de fetch() et gestion de la réponse avec async/await.
Importance de gérer les clés API en toute sécurité (cette clé est uniquement à des fins de test).

2.Gestion des erreurs :

Affichage d'un message d'erreur lorsqu'une ville non valide est saisie ou si la requête API échoue.

3.Mises à jour dynamiques de l'interface utilisateur :
Mise à jour dynamique du contenu sur la page en fonction des données API.
Rendu conditionnel pour différentes icônes météo.

4.CSS & Réactivité :

L'application utilise une simple interface utilisateur basée sur une carte. Un fichier styles.css distinct a été utilisé pour gérer la mise en page et la conception.

5.Manipulation du DOM JavaScript :
Utiliser querySelector et innerHTML pour interagir avec les éléments HTML.

Pensées finales
Créer cette application météo était passionnant et a renforcé mes connaissances de JavaScript, des appels API et de la manipulation DOM. Au fur et à mesure que je continue, j'ai hâte de faire la transition de tels projets vers React pour une approche davantage basée sur les composants. ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!