我的第一個天氣應用程式

使用 API 整合建立簡單的天氣應用程式

隨著我繼續學習並提高編碼技能，我決定使用 API 來建立一個基本的天氣應用程式來獲取即時數據。這個專案幫助我了解如何與 API 互動、處理非同步操作以及動態更新使用者介面。在本部落格中，我將引導您完成用於建立應用程式的程式碼。

---

專案概況

天氣應用程式取得給定位置的天氣資料並顯示當前天氣和 3 天的天氣預報。它使用 Wea​​therAPI 收集數據，並由 JavaScript 處理該功能。

---

主要特點

1. 位置搜尋：使用者可以輸入城市名稱以取得天氣資料。

2. 目前天氣：顯示目前溫度、天氣狀況等。

3. 天氣預報：顯示未來 3 天的天氣預報。

讓我們來看看使這個應用程式運行的程式碼的關鍵部分。

---

1. 使用 API 取得天氣資料

第一步是從 WeatherAPI 取得天氣資料。以下是我如何設定函數來處理 API 呼叫：

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);
    }
}

函數使用 fetch() 向 WeatherAPI 發出非同步請求。它會檢索當前天氣和 3 天的天氣預報，然後將該資料傳遞給 displayCurrent() 和 displayForecast() 函數。

---

1. 處理使用者輸入

應用程式透過搜尋框監聽使用者輸入。當使用者輸入某個位置（例如“倫敦”）時，它會觸發天氣搜尋：

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);
});

這允許使用者在搜尋框中鍵入或點擊搜尋按鈕來獲取天氣資料。

---

1. 顯示目前天氣

取得資料後，displayCurrent() 函數負責在頁面上顯示目前天氣詳細資料。其工作原理如下：

函數displayCurrent（位置，當前天氣）{
    如果（當前天氣）{
        讓lastUpdatedDate = new Date(currentWeather.last_updated);
        讓cardHTML = `
            <div>



<p>此函數會產生一張卡片，顯示當前溫度、天氣狀況以及風速和濕度等其他詳細資訊。它透過將產生的 HTML 插入 DOM 來動態更新頁面。 </p>


<hr>

<ol>
<li>顯示 3 天天氣預報</li>
</ol>

<p>接下來，我顯示未來三天的天氣預報。這是由 displayForecast() 函數處理的：<br>
</p>
<pre class="brush:php;toolbar:false">函數displayForecast(forecastData) {
    讓 ForecastHTML = '';
    for (令 i = 1; i 



<p>此函數循環預測資料並產生未來兩天的卡片，顯示最高和最低溫度、天氣狀況和圖示。 </p>


<hr>

<p>結論</p>

<p>建立這個天氣應用程式對我來說是一次很好的練習，因為我學會瞭如何與 API 互動、處理 JSON 資料以及動態更新網頁。這個專案幫助我鞏固了非同步 JavaScript、DOM 操作和事件處理的知識。 </p>

<p>如果您剛開始使用 JavaScript 和 API，這款天氣應用程式是練習技能的簡單且強大的方法。您可以透過添加更多功能（例如錯誤處理、更詳細的預測，甚至 UI 的深色模式）來擴展此項目。 </p>


<hr>

<p>請隨意嘗試程式碼並調整它以滿足您的需求。如果您有任何問題或建議請告訴我！ </p>


          

以上是我的第一個天氣應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！