使用 JavaScript 建立單頁天氣應用程式

簡介
為了最終結束 Flatiron 學校軟體工程課程的第一階段，我們被指派只使用 HTML、CSS 和 JavaScript 創建一個單頁 Web 應用程序，並合併一個為我們的網頁提供資料的公共 API。

對於我的項目，我決定創建自己的天氣應用程序，名為“今天的天氣預報”。雖然該專案本身確實有點基礎，但這是一個有趣的挑戰。我們的目標是建立一個用戶友好的響應式應用程序，為世界上任何城市提供即時天氣更新和詳細預報。

專案要求
此計畫提出了多項要求，每項要求都強化了第一階段中教授的基本概念和課程：

應用程式必須完全在單一頁面上運行。不允許重定向或重新加載，資料必須來自公共 API 或 db.json 檔案。
API 或 db.json 檔案必須傳回至少五個不同的對象，每個對象至少包含三個屬性。
所有客戶端和 API 互動都應使用 JSON 作為通訊格式非同步處理。
此項目必須至少使用三個唯一的事件偵聽器，每個偵聽器偵聽不同類型的事件，並使用 addEventListener() 方法新增。每個事件監聽器必須有自己獨特的回調。
應用程式必須至少實作一個數組迭代實例。

我個人發現 API 的實作是最具挑戰性的，部分原因是我自己的優柔寡斷，但也因為這個概念對我來說是最陌生的。然而經過一番探索，我發現 API 實作實際上是這個專案更容易的方面之一。

「今日天氣預報」的功能：

即時天氣更新
當使用者輸入城市名稱時，應用程式將返回特定於該位置的即時天氣資料。首頁將顯示當前溫度（攝氏度）、簡短的天氣預報以及直觀地表示天氣預報的圖示。

3 小時天氣預報：
該應用程式還以 3 小時為間隔提供 24 小時天氣預報。此部分向使用者顯示當前時間和預測溫度（以攝氏度為單位）。

動態更新：
所有資料都是動態取得和顯示的，無需重新載入頁面，確保無縫的使用者體驗。

我如何滿足要求

1. 單頁應用程式
   該天氣應用程式完全在單一頁面上運行。當使用者搜尋城市時，JavaScript 會取得所需的數據，清除舊內容，並使用新資訊動態更新頁面 - 所有這些都無需重定向或重新載入。

2. 五個具有屬性的物件
   實作了以下物件：

1.) 都市物件：
屬性：包括名稱、緯度和經度。

2.) 天氣對象：
屬性：包括溫度、描述和圖示。

3.) 預測對象：
屬性：包括時間、溫度、圖示。

4.) 日期時間對象：
屬性：包括日期、時間和星期。

5.) DOM 元素物件：
屬性：包括 id、type 和 content。

每個物件都在建立資料和確保模組化方面發揮了作用。

1. 非同步 API 處理
   使用 fetch API，應用程式從 OpenWeather API 檢索即時天氣和預報資料。所有資料互動均使用JSON，滿足專案需求。

2. 三個獨特的事件監聽器
   該應用程式包含三個不同的事件偵聽器：

點擊事件：當使用者點擊「搜尋」按鈕時，它會取得天氣資料。
按鍵事件：當在輸入欄位中按下「Enter」鍵時，會觸發相同的天氣獲取功能。
滑鼠懸停事件：當使用者將滑鼠懸停在天氣圖示上時，會動態顯示附加資訊（例如「OpenWeatherMap 提供的資料」）。

1. 數組迭代 預測部分使用 forEach 方法為每個 3 小時的預測動態建立 HTML 元素。

挑戰與解決方案
我在這個專案中遇到的一些挑戰是了解如何在從 OpenWeather API 獲取資料時處理非同步操作，以及了解 API 本身以及它與 db.json 檔案的區別。
應用程式的樣式對我來說是另一個巨大的挑戰，因為 CSS 一直是一個弱點，我傾向於處理更令人畏懼的技術概念，而不會關注它。
然而，透過實踐，這些概念似乎不那麼可怕，雖然我知道我的程式碼遠非完美，但在應對這些挑戰後，我對自己作為開發人員的技能更有信心了。

結論
這個專案不僅鞏固了我對 JavaScript 的理解，也教會了我關於堅持、解決問題以及乾淨、模組化程式碼的重要性的寶貴經驗。

我希望您喜歡探索該應用程序，就像我喜歡構建它一樣。請隨時分享您的回饋或改進建議—我很想聽聽您的想法！

如果您想查看該專案的原始程式碼，可以在此儲存庫中存取它：https://github.com/CourtneyKerr19/Todays_Weather_Forecast

感謝您的閱讀！

以上是使用 JavaScript 建立單頁天氣應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！