創建我的 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中文網其他相關文章！