Erstellen der App „Meine Pokémon-Sammlung“: Lokale Daten, Interaktivität und JavaScript-Ereignisse

Einführung

Als ich dieses Projekt startete, war mein Ziel einfach: eine Pokémon-Sammel-App zu erstellen, mit der Benutzer Pokémon und ihre Details erkunden können. Durch die Kombination von JavaScript, Node.js und lokalen Daten habe ich eine interaktive App erstellt, die es Benutzern ermöglicht, Pokémon-Bilder, -Fähigkeiten und -Typen anzuzeigen – und gleichzeitig meine Fähigkeiten mit Ereignis-Listenern, dynamischen Inhaltsaktualisierungen und mehr zu verfeinern. Während ich mit einem Partner daran gearbeitet habe, werde ich mich konkret auf meine Arbeit konzentrieren. So kam es zusammen!

---

Projektübersicht

Diese App wurde entwickelt, um eine Sammlung von Pokémon-Bildern und -Statistiken zu präsentieren, sodass Benutzer einfach auf jedes Pokémon klicken können, um Details anzuzeigen und mit Hover-Interaktionen zwischen Haupt- und Alternativbildern zu wechseln. Ich habe die Pokémon-Daten lokal bereitgestellt, sodass ich mich auf das Rendern, Aktualisieren und Interagieren mit den Daten in der App selbst konzentrieren konnte.

---

Einrichten lokaler Daten mit db.json

Anstatt von einer externen API abzurufen, habe ich eine lokale db.json-Datei mit Pokémon-Daten erstellt, einschließlich Attributen wie Name, Typ, Fähigkeit und Bildpfaden. Wenn ich einen lokalen Server unter http://localhost:3500/pokemon betreibe, könnte ich diese Daten mithilfe der Fetch-Methode in JavaScript abrufen. Durch die vereinfachte Einrichtung konnte ich die App vollständig offline erstellen und testen.

---

Code-Komplettlösung

Hier ist ein Blick darauf, wie ich an wichtige Teile des Projekts herangegangen bin.

1. Daten abrufen: Der erste Schritt bestand darin, Pokémon-Daten vom lokalen Server abzurufen. Ich habe eine getAllPokemon-Funktion erstellt, um die Abrufanforderung zu verarbeiten und die Pokémon-Details im JSON-Format zurückzugeben.

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

Diese Funktion ruft die Pokémon-Daten von http://localhost:3500/pokemon ab, die ich dann verwende, um jedes Pokémon dynamisch zu rendern.

1. Pokémon anzeigen: Um die Sammlung zu füllen, habe ich eine displayPokemons-Funktion verwendet, die die abgerufenen Pokémon-Daten durchläuft und jedes Element als Bild darstellt. Außerdem habe ich jedem Bild einen Click-Event-Listener hinzugefügt, der bei Auswahl die Pokémon-Details öffnet:

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

Die renderPokemon-Funktion erstellt ein Bild für jedes Pokémon, fügt Stil hinzu und hängt ein Klickereignis an, um Details anzuzeigen.

1. Ereignis-Listener: Interaktivität hinzufügen Ich habe in diesem Projekt zwei Haupttypen von Ereignis-Listenern verwendet: einen Form-Submit-Listener zum Hinzufügen neuer Pokémon und Mouseover-/Mouseout-Ereignisse zum Umschalten zwischen Bildern. Diese Zuhörer haben die App ansprechender und benutzerfreundlicher gemacht.

• Formulareinreichung:
  
  Um ein neues Pokémon hinzuzufügen, habe ich im Formular einen Submit-Listener eingerichtet, der Werte aus Eingabefeldern sammelt und das neue Pokémon der Sammlung hinzufügt. Dieses neue Pokémon wird gerendert, ohne dass die Seite aktualisiert werden muss:
  

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

  Hier verhindert event.preventDefault(), dass das Formular die Seite neu lädt, um ein reibungsloses Benutzererlebnis zu gewährleisten.

• Mouseover-Event für alternative Bilder:
  
  Wenn Benutzer mit der Maus über das Bild des Pokémon im Detailbereich fahren, wechselt es zu einem alternativen Bild, das eine Entwicklung oder Transformation simuliert. Das Mouseover-Ereignis löst diesen Schalter aus, während Mouseout ihn zurücksetzt:
  

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

  Dieser Effekt bietet Benutzern eine unterhaltsame Möglichkeit, mit jedem Pokémon zu interagieren und seine Eigenschaften visuell zu erkunden.

---

Herausforderungen und Lernpunkte

Eine Herausforderung bestand darin, das JavaScript so zu strukturieren, dass es modular und verwaltbar bleibt, da Ereignis-Listener und dynamische Elemente schnell schwer zu verfolgen sein können. Ich habe gelernt, meinen Code in kleinere Funktionen zu unterteilen und Ereignis-Listener selektiv zu verwenden, um Leistung und Lesbarkeit zu optimieren.

---

Zusammenfassung

Dieses Pokémon-Sammelprojekt war eine spannende Möglichkeit, JavaScript anzuwenden, mit dem Abrufen lokaler Daten zu experimentieren und ansprechende ereignisgesteuerte Interaktivität hinzuzufügen. Die Entwicklung dieser App von Grund auf hat mir wertvolle Erfahrungen sowohl mit Front-End- als auch Back-End-Konzepten verschafft und mich dazu inspiriert, in Zukunft weitere interaktive Projekte zu erkunden.

Schauen Sie sich mein Projekt auf GitHub an!:

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

Das obige ist der detaillierte Inhalt vonErstellen der App „Meine Pokémon-Sammlung“: Lokale Daten, Interaktivität und JavaScript-Ereignisse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!