簡介
為了最終結(jié)束 Flatiron 學(xué)校軟件工程課程的第一階段，我們被分配只使用 HTML、CSS 和 JavaScript 創(chuàng)建一個單頁 Web 應(yīng)用程序，并合并一個為我們的網(wǎng)頁提供數(shù)據(jù)的公共 API。

對于我的項目，我決定創(chuàng)建自己的天氣應(yīng)用程序，名為“今天的天氣預(yù)報”。雖然該項目本身確實有點基礎(chǔ)，但這是一個有趣的挑戰(zhàn)。我們的目標是構(gòu)建一個用戶友好的響應(yīng)式應(yīng)用程序，為世界上任何城市提供實時天氣更新和詳細預(yù)報。

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

應(yīng)用程序必須完全在單個頁面上運行。不允許重定向或重新加載，數(shù)據(jù)必須來自公共 API 或 db.json 文件。
API 或 db.json 文件必須返回至少五個不同的對象，每個對象至少包含三個屬性。
所有客戶端和 API 交互都應(yīng)使用 JSON 作為通信格式異步處理。
該項目必須至少使用三個唯一的事件偵聽器，每個偵聽器偵聽不同類型的事件，并使用 addEventListener() 方法添加。每個事件監(jiān)聽器必須有自己獨特的回調(diào)。
應(yīng)用程序必須至少實現(xiàn)一個數(shù)組迭代實例。

我個人發(fā)現(xiàn) API 的實現(xiàn)是最具挑戰(zhàn)性的，部分原因是我自己的優(yōu)柔寡斷，但也因為這個概念對我來說是最陌生的。然而經(jīng)過一番探索，我發(fā)現(xiàn) API 實現(xiàn)實際上是這個項目更容易的方面之一。

“今日天氣預(yù)報”的功能：

實時天氣更新
當用戶輸入城市名稱時，應(yīng)用程序?qū)⒎祷靥囟ㄓ谠撐恢玫膶崟r天氣數(shù)據(jù)。首頁將顯示當前溫度（攝氏度）、簡短的天氣描述以及直觀地表示天氣預(yù)報的圖標。

3 小時天氣預(yù)報：
該應(yīng)用程序還以 3 小時為間隔提供 24 小時天氣預(yù)報。此部分向用戶顯示當前時間和預(yù)測溫度（以攝氏度為單位）。

動態(tài)更新：
所有數(shù)據(jù)都是動態(tài)獲取和顯示的，無需重新加載頁面，確保無縫的用戶體驗。

我如何滿足要求

1. 單頁應(yīng)用程序
   該天氣應(yīng)用程序完全在單個頁面上運行。當用戶搜索城市時，JavaScript 會獲取所需的數(shù)據(jù)，清除舊內(nèi)容，并使用新信息動態(tài)更新頁面 - 所有這些都無需重定向或重新加載。

2. 五個具有屬性的對象
   實現(xiàn)了以下對象：

1.) 城市對象：
屬性：包括名稱、緯度和經(jīng)度。

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

3.) 預(yù)測對象：
屬性：包括時間、溫度、圖標。

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

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

每個對象都在構(gòu)建數(shù)據(jù)和確保模塊化方面發(fā)揮了作用。

1. 異步 API 處理
   使用 fetch API，應(yīng)用程序從 OpenWeather API 檢索實時天氣和預(yù)報數(shù)據(jù)。所有數(shù)據(jù)交互均使用JSON，滿足項目需求。

2. 三個獨特的事件監(jiān)聽器
   該應(yīng)用程序包含三個不同的事件偵聽器：

點擊事件：當用戶點擊“搜索”按鈕時，它會獲取天氣數(shù)據(jù)。
按鍵事件：當在輸入字段中按下“Enter”鍵時，會觸發(fā)相同的天氣獲取功能。
鼠標懸停事件：當用戶將鼠標懸停在天氣圖標上時，會動態(tài)顯示附加信息（例如“OpenWeatherMap 提供的數(shù)據(jù)”）。

1. 數(shù)組迭代 預(yù)測部分使用 forEach 方法為每個 3 小時的預(yù)測動態(tài)創(chuàng)建 HTML 元素。

挑戰(zhàn)與解決方案
我在這個項目中遇到的一些挑戰(zhàn)是了解如何在從 OpenWeather API 獲取數(shù)據(jù)時處理異步操作，以及了解 API 本身以及它與 db.json 文件的區(qū)別。
應(yīng)用程序的樣式對我來說是另一個巨大的挑戰(zhàn)，因為 CSS 一直是一個弱點，我傾向于處理更令人畏懼的技術(shù)概念，而不會關(guān)注它。
然而，通過實踐，這些概念似乎并不那么可怕，雖然我知道我的代碼遠非完美，但在應(yīng)對這些挑戰(zhàn)后，我對自己作為開發(fā)人員的技能更有信心了。

結(jié)論
這個項目不僅鞏固了我對 JavaScript 的理解，還教會了我關(guān)于堅持、解決問題以及干凈、模塊化代碼的重要性的寶貴經(jīng)驗。

我希望您喜歡探索該應(yīng)用程序，就像我喜歡構(gòu)建它一樣。請隨時分享您的反饋或改進建議——我很想聽聽您的想法！

如果您想查看該項目的源代碼，可以在此存儲庫中訪問它：https://github.com/CourtneyKerr19/Todays_Weather_Forecast

感謝您的閱讀！

以上是使用 JavaScript 構(gòu)建單頁天氣應(yīng)用程序的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！