使用 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中文网其他相关文章！