私の React の旅: 13 日目

Project O'Clock: 天気アプリ

今日、OpenWeather API からリアルタイムの気象データを取得するシンプルな天気アプリを作成しました。このアプリを使用すると、ユーザーは都市を検索し、気温、湿度、風速、気象条件などの主要な気象情報を表示できます。

キーコードのハイライト

1. API の詳細 このアプリは、気温のメートル単位を使用する OpenWeather API を使用します。

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

2.クエリセレクター
これらの要素は、HTML 構造を JavaScript に接続します:

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

3.気象データの取得
checkWeather() 関数は API リクエストを送信し、レスポンスを処理します。

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.検索用イベント リスナー
これにより、検索ボタンに対話性が追加されます:

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

学んだこと

1. API 統合:

fetch() を使用してデータを取得し、async/await で応答を処理します。
API キーを安全に管理することの重要性 (このキーはテスト目的のみに使用されます)。

2.エラー処理:

無効な都市が入力された場合、または API リクエストが失敗した場合にエラー メッセージを表示します。

3.動的 UI 更新:
API データに基づいてページ上のコンテンツを動的に更新します。
さまざまな天気アイコンの条件付きレンダリング。

4.CSS と応答性:

アプリはシンプルなカードベースの UI を使用します。レイアウトとデザインの管理には、別のstyles.cssファイルが使用されました。

5.JavaScript DOM 操作:
querySelector と innerHTML を使用して HTML 要素を操作します。

最終的な考え
この天気アプリの構築は刺激的で、JavaScript、API 呼び出し、DOM 操作についての知識が強化されました。今後も、よりコンポーネントベースのアプローチを実現するために、このようなプロジェクトを React に移行することを楽しみにしています。 ?

以上が私の React の旅: 13 日目の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。