创建我的 Pokémon Collection 应用程序：本地数据、交互性和 JavaScript 事件

介绍

当我开始这个项目时，我的目标很简单：创建一个神奇宝贝收集应用程序，用户可以在其中探索神奇宝贝及其详细信息。通过结合 JavaScript、Node.js 和本地数据，我构建了一个交互式应用程序，允许用户查看 Pokémon 图像、能力和类型，同时通过事件侦听器、动态内容更新等提高我的技能。当我与合作伙伴一起从事这项工作时，我将专门专注于我的工作。这是它是如何组合在一起的！

---

项目概况

此应用程序旨在展示一系列神奇宝贝图像和统计数据，使用户可以轻松单击每个神奇宝贝以查看详细信息，并通过悬停交互在主图像和备用图像之间切换。我在本地提供 Pokémon 数据，这使我能够专注于如何渲染、更新应用程序本身的数据以及如何与数据交互。

---

使用 db.json 设置本地数据

我没有从外部 API 中提取数据，而是使用 Pokémon 数据创建了一个本地 db.json 文件，其中包括名称、类型、能力和图像路径等属性。在 http://localhost:3500/pokemon 上运行本地服务器，我可以使用 JavaScript 中的 fetch 方法获取此数据。简化的设置使我能够完全离线构建和测试应用程序。

---

代码演练

以下是我如何处理该项目的关键部分。

1. 获取数据： 第一步是从本地服务器获取神奇宝贝数据。我创建了一个 getAllPokemon 函数来处理获取请求并以 JSON 格式返回 Pokémon 详细信息。

   function getAllPokemon() {
     return fetch(pokemonURL).then(response => response.json());
   }

此函数从 http://localhost:3500/pokemon 获取 Pokémon 数据，然后我用它来动态渲染每个 Pokémon。

1. 显示神奇宝贝： 为了填充集合，我使用了 displayPokemons 函数，该函数迭代获取的 Pokémon 数据并将每个项目呈现为图像。我还在每个图像上添加了一个单击事件侦听器，该侦听器在选择时会打开 Pokémon 详细信息：

   const displayPokemons = () => {
     getAllPokemon().then(pokemonArr => {
       pokemonArr.forEach(renderPokemon);
       handleClick(pokemonArr[0]); // Display first Pokémon by default
     });
   }

renderPokemon 函数为每个 Pokémon 创建图像，添加样式，并附加单击事件以显示详细信息。

1. 事件监听器：添加交互性 我在这个项目中使用了两种主要类型的事件侦听器：用于添加新神奇宝贝的表单提交侦听器和用于在图像之间切换的鼠标悬停/鼠标悬停事件。这些听众使应用程序更具吸引力和用户友好性。

• 表格提交:
  
  为了添加新的 Pokémon，我在表单上设置了一个提交侦听器，该监听器从输入字段收集值并将新的 Pokémon 添加到集合中。这个新的神奇宝贝无需刷新页面即可渲染：
  

     function getAllPokemon() {
       return fetch(pokemonURL).then(response => response.json());
     }
  

  这里，event.preventDefault() 会阻止表单重新加载页面，确保流畅的用户体验。

• 替代图像的鼠标悬停事件：
  
  当用户将鼠标悬停在详细信息部分中的神奇宝贝图像上时，它会切换到替代图像，模拟进化或转变。 mouseover 事件会触发此开关，而 mouseout 则会将其恢复：
  

     const displayPokemons = () => {
       getAllPokemon().then(pokemonArr => {
         pokemonArr.forEach(renderPokemon);
         handleClick(pokemonArr[0]); // Display first Pokémon by default
       });
     }
  

  这种效果为用户提供了一种有趣的方式与每个神奇宝贝互动并直观地探索其特征。

---

挑战和学习点

一个挑战是构造 JavaScript 以保持其模块化和可管理性，因为事件侦听器和动态元素很快就会变得难以跟踪。我学会了将代码划分为更小的函数，并有选择地使用事件侦听器来优化性能和可读性。

---

总结

这个神奇宝贝收集项目是应用 JavaScript、尝试本地数据获取以及添加引人入胜的事件驱动交互性的令人兴奋的方式。从头开始构建这个应用程序给了我宝贵的前端和后端概念经验，让我受到启发，在未来探索更多的互动项目。

在 GitHub 上查看我的项目！：

https://github.com/kelseyroche/phase-1-project-pokemon

以上是创建我的 Pokémon Collection 应用程序：本地数据、交互性和 JavaScript 事件的详细内容。更多信息请关注PHP中文网其他相关文章！