使用 JavaScript 构建单页天气应用程序

# Web 开发# JavaScript# 初学者

介绍

为了最终完成 Flatiron School 软件工程课程第一阶段的任务，我们被要求仅使用 HTML、CSS 和 JavaScript 创建一个单页 Web 应用程序，并加入一个可为我们的网页提供数据的公共 API。

对于我的项目，我决定创建自己的天气应用，名为“今日天气预报”。虽然项目本身确实有点基础，但这是一个有趣的挑战。目标是构建一个用户友好、响应迅速的应用，为世界上任何城市提供实时天气更新和详细预报。

项目要求

该项目有几个要求，每个要求都强化了第一阶段教授的基本概念和课程：

应用程序必须完全在单个页面上运行。不允许重定向或重新加载，数据必须来自公共 API 或 db.json 文件。

API 或 db.json 文件必须返回至少五个不同的对象，每个对象至少包含三个属性。

所有客户端和 API 交互都应异步处理，使用 JSON 作为通信格式。

项目必须使用至少三个唯一的事件监听器，每个监听器监听不同类型的事件，使用 addEventListener() 方法添加。每个事件监听器必须有自己唯一的回调。

应用程序必须实现至少一个数组迭代实例。

我个人认为 API 的实现最具挑战性，部分原因是我自己犹豫不决，但也因为这个概念对我来说最陌生。然​​而，经过一番探索，我发现 API 实现实际上是这个项目比较容易的方面之一。

“今日天气预报”的特点：

实时天气更新

当用户输入城市名称时，该应用程序将返回该位置的实时天气数据。首页将显示当前温度（摄氏度）、简短的天气描述以及一个图标来直观地表示天气预报。

3小时预报：

该应用程序还以 3 小时为间隔提供 24 小时预报。此部分向用户显示当前时间和预测温度（以摄氏度为单位）。

动态更新：

所有数据均动态获取并显示，无需重新加载页面，确保无缝的用户体验。

我如何满足要求

  • 单页应用程序 此天气应用程序完全在单页上运行。当用户搜索城市时，JavaScript 会获取所需数据、清除旧内容，并使用新信息动态更新页面 — 所有这些都无需重定向或重新加载。
  • 五个具有属性的对象实现了以下对象：

    • 1.) 城市对象：

    属性：包括名称、纬度和经度。

    2.) 天气对象：

    属性：包括温度、描述和图标。

    3.)预测对象：

    属性：包括时间、温度、图标。

    4.）DateTime对象：

    属性：包括日期、时间和星期。

    5.）DOM元素对象：

    属性：包括id、type、content。

    每个对象在构造数据和确保模块化方面发挥着作用。

  • 异步 API 处理 使用 fetch API，应用程序从 OpenWeather API 检索实时天气和预报数据。所有数据交互均使用 JSON，满足项目要求。
  • 三个独特的事件监听器该应用程序包含三个不同的事件监听器：

    • 点击事件：当用户点击“搜索”按钮时，它会获取天气数据。

    按键事件：当在输入字段中按下“Enter”键时，它会触发相同的天气获取功能。

    鼠标悬停事件：当用户将鼠标悬停在天气图标上时，会动态显示附加信息（例如“OpenWeatherMap 提供的数据”）。

  • 数组迭代预测部分使用 forEach 方法为每个 3 小时预测动态创建 HTML 元素。

    • 挑战与解决方案

    我在这个项目中遇到的一些挑战是了解如何在从 OpenWeather API 获取数据时处理异步操作，以及了解 API 本身以及它与 db.json 文件的区别。

    应用程序样式设计对我来说是另一大挑战，因为 CSS 一直是我的弱点，我倾向于不专注于处理更艰巨和技术性的概念。

    然而，通过实践，这些概念似乎并不那么可怕，虽然我知道我的代码远非完美，但在解决这些挑战之后，我对自己作为开发人员的技能更加有信心。

    结论

    这个项目不仅巩固了我对 JavaScript 的理解，还教会了我关于毅力、解决问题以及干净、模块化代码的重要性的宝贵经验。

    我希望您能像我一样享受开发这款应用的乐趣。欢迎分享您的反馈或改进建议——我很乐意听听您的想法！

    如果您想查看该项目的源代码，您可以通过以下存储库访问：https://github.com/CourtneyKerr19/Todays_Weather_Forecast

    感谢您的阅读！