Mencipta Apl Koleksi Pokémon Saya: Data Setempat, Interaktiviti dan Acara JavaScript

pengenalan

Apabila saya memulakan projek ini, matlamat saya adalah mudah: untuk mencipta aplikasi koleksi Pokémon yang membolehkan pengguna menerokai Pokémon dan butiran mereka. Dengan menggabungkan JavaScript, Node.js dan data setempat, saya membina apl interaktif yang membolehkan pengguna melihat imej, kebolehan dan jenis Pokémon—semuanya sambil memperhalusi kemahiran saya dengan pendengar acara, kemas kini kandungan dinamik dan banyak lagi. Semasa saya bekerja dengan rakan kongsi, saya akan menumpukan pada kerja saya secara khusus. Begini caranya!

---

Gambaran Keseluruhan Projek

Apl ini direka bentuk untuk mempamerkan koleksi imej dan statistik Pokémon, memudahkan pengguna mengklik pada setiap Pokémon untuk melihat butiran dan bertukar antara imej utama dan alternatif dengan interaksi tuding. Saya menyampaikan data Pokémon secara setempat, yang membolehkan saya menumpukan pada cara untuk memaparkan, mengemas kini dan berinteraksi dengan data dalam apl itu sendiri.

---

Menyediakan Data Tempatan dengan db.json

Daripada menarik dari API luaran, saya mencipta fail db.json setempat dengan data Pokémon, termasuk atribut seperti nama, jenis, keupayaan dan laluan imej. Menjalankan pelayan tempatan pada http://localhost:3500/pokemon, saya boleh mengambil data ini menggunakan kaedah pengambilan dalam JavaScript. Persediaan yang dipermudahkan membolehkan saya membina dan menguji apl sepenuhnya di luar talian.

---

Panduan Kod

Berikut ialah cara saya mendekati bahagian penting projek.

1. Mengambil Data: Langkah pertama ialah mengambil data Pokémon daripada pelayan tempatan. Saya mencipta fungsi getAllPokemon untuk mengendalikan permintaan pengambilan dan mengembalikan butiran Pokémon dalam format JSON.

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

Fungsi ini menarik data Pokémon daripada http://localhost:3500/pokemon, yang kemudiannya saya gunakan untuk memaparkan setiap Pokémon secara dinamik.

1. Memaparkan Pokémon: Untuk mengisi koleksi, saya menggunakan fungsi displayPokemons yang berulang melalui data Pokémon yang diambil dan menjadikan setiap item sebagai imej. Saya juga menambah pendengar acara klik pada setiap imej, yang membuka butiran Pokémon apabila dipilih:

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

Fungsi renderPokemon mencipta imej untuk setiap Pokémon, menambah gaya dan melampirkan acara klik untuk memaparkan butiran.

1. Pendengar Acara: Menambah Interaktiviti Saya menggunakan dua jenis utama pendengar acara dalam projek ini: pendengar penyerahan borang untuk menambahkan acara Pokémon dan mouseover/mouseout baharu untuk bertukar-tukar antara imej. Pendengar ini menjadikan apl lebih menarik dan mesra pengguna.

• Penyerahan Borang:
  
  Untuk menambah Pokémon baharu, saya menyediakan pendengar hantar pada borang, yang mengumpulkan nilai daripada medan input dan menambahkan Pokémon baharu pada koleksi. Pokémon baharu ini dipaparkan tanpa perlu memuat semula halaman:
  

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

  Di sini, event.preventDefault() menghentikan borang daripada memuat semula halaman, memastikan pengalaman pengguna yang lancar.

• Acara Tetikus untuk Imej Ganti:
  
  Apabila pengguna menuding pada imej Pokémon dalam bahagian butiran, ia bertukar kepada imej alternatif, mensimulasikan evolusi atau transformasi. Peristiwa alih tetikus mencetuskan suis ini, manakala tetikus keluar membalikkannya semula:
  

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

  Kesan ini memberikan pengguna cara yang menyeronokkan untuk berinteraksi dengan setiap Pokémon dan meneroka ciri-cirinya secara visual.

---

Cabaran dan Perkara Pembelajaran

Satu cabaran ialah menstrukturkan JavaScript untuk memastikannya modular dan terurus, kerana pendengar acara dan elemen dinamik boleh menjadi sukar untuk dikesan dengan cepat. Saya belajar untuk membahagikan kod saya kepada fungsi yang lebih kecil dan menggunakan pendengar acara secara selektif untuk mengoptimumkan prestasi dan kebolehbacaan.

---

Membungkus

Projek pengumpulan Pokémon ini merupakan cara yang menarik untuk menggunakan JavaScript, bereksperimen dengan pengambilan data setempat dan menambah interaktiviti dipacu peristiwa yang menarik. Membina apl ini dari awal memberi saya pengalaman berharga dengan konsep bahagian hadapan dan belakang, menjadikan saya terinspirasi untuk meneroka lebih banyak projek interaktif pada masa hadapan.

Lihat projek saya di GitHub!:

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

Atas ialah kandungan terperinci Mencipta Apl Koleksi Pokémon Saya: Data Setempat, Interaktiviti dan Acara JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!