我的 React 之旅：第 13 天

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 與反應能力：

該應用程式使用簡單的基於卡片的使用者介面。使用單獨的 styles.css 檔案來管理佈局和設計。

5.JavaScript DOM 操作：
使用querySelector和innerHTML與HTML元素互動。

最後的想法
建立這個天氣應用程式非常令人興奮，它增強了我對 JavaScript、API 呼叫和 DOM 操作的了解。隨著我的繼續，我期待將此類專案轉換為 React，以實現更基於元件的方法。 ？

以上是我的 React 之旅：第 13 天的詳細內容。更多資訊請關注PHP中文網其他相關文章！