Création de l'application My Pokémon Collection : données locales, interactivité et événements JavaScript

Introduction

Quand j'ai démarré ce projet, mon objectif était simple : créer une application de collection de Pokémon où les utilisateurs pourraient explorer les Pokémon et leurs détails. En combinant JavaScript, Node.js et des données locales, j'ai créé une application interactive qui permet aux utilisateurs de visualiser les images, les capacités et les types de Pokémon, tout en affinant mes compétences avec les auditeurs d'événements, les mises à jour de contenu dynamiques, et bien plus encore. Pendant que j'y travaille avec un partenaire, je vais me concentrer spécifiquement sur mon travail. Voici comment tout cela s’est déroulé !

---

Aperçu du projet

Cette application est conçue pour présenter une collection d'images et de statistiques Pokémon, permettant aux utilisateurs de cliquer facilement sur chaque Pokémon pour afficher les détails et basculer entre les images principales et alternatives avec des interactions de survol. J'ai diffusé les données Pokémon localement, ce qui m'a permis de me concentrer sur la façon de restituer, de mettre à jour et d'interagir avec les données au sein de l'application elle-même.

---

Configuration des données locales avec db.json

Au lieu d'extraire d'une API externe, j'ai créé un fichier db.json local avec des données Pokémon, y compris des attributs tels que le nom, le type, la capacité et les chemins d'image. En exécutant un serveur local sur http://localhost:3500/pokemon, j'ai pu récupérer ces données en utilisant la méthode fetch en JavaScript. La configuration simplifiée m'a permis de créer et de tester l'application entièrement hors ligne.

---

Procédure pas à pas du code

Voici un aperçu de la façon dont j’ai abordé les éléments clés du projet.

1. Récupération de données : La première étape consistait à récupérer les données Pokémon du serveur local. J'ai créé une fonction getAllPokemon pour gérer la demande de récupération et renvoyer les détails du Pokémon au format JSON.

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

Cette fonction extrait les données Pokémon de http://localhost:3500/pokemon, que j'utilise ensuite pour restituer dynamiquement chaque Pokémon.

1. Affichage des Pokémon : Pour remplir la collection, j'ai utilisé une fonction displayPokemons qui parcourt les données Pokémon récupérées et restitue chaque élément sous forme d'image. J'ai également ajouté un écouteur d'événement de clic sur chaque image, qui ouvre les détails du Pokémon une fois sélectionné :

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

La fonction renderPokemon crée une image pour chaque Pokémon, ajoute un style et attache un événement de clic pour afficher les détails.

1. Écouteurs d'événements : ajout d'interactivité J'ai utilisé deux principaux types d'écouteurs d'événements dans ce projet : un écouteur de soumission de formulaire pour ajouter de nouveaux Pokémon et des événements de survol/de sortie de souris pour basculer entre les images. Ces auditeurs ont rendu l'application plus attrayante et conviviale.

• Soumission du formulaire :
  
  Pour ajouter un nouveau Pokémon, j'ai configuré un écouteur de soumission sur le formulaire, qui rassemble les valeurs des champs de saisie et ajoute le nouveau Pokémon à la collection. Ce nouveau Pokémon est rendu sans avoir besoin de rafraîchir la page :
  

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

  Ici, event.preventDefault() empêche le formulaire de recharger la page, garantissant une expérience utilisateur fluide.

• Événement de survol pour les images alternatives :
  
  Lorsque les utilisateurs survolent l’image du Pokémon dans la section détails, celle-ci passe à une image alternative, simulant une évolution ou une transformation. L'événement mouseover déclenche ce commutateur, tandis que mouseout le rétablit :
  

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

  Cet effet offre aux utilisateurs une façon amusante d'interagir avec chaque Pokémon et d'explorer visuellement ses caractéristiques.

---

Défis et points d’apprentissage

L'un des défis consistait à structurer le JavaScript pour qu'il reste modulaire et gérable, car les écouteurs d'événements et les éléments dynamiques peuvent rapidement devenir difficiles à suivre. J'ai appris à compartimenter mon code en fonctions plus petites et à utiliser les écouteurs d'événements de manière sélective pour optimiser les performances et la lisibilité.

---

Conclusion

Ce projet de collection Pokémon était une façon passionnante d'appliquer JavaScript, d'expérimenter la récupération de données locales et d'ajouter une interactivité attrayante basée sur des événements. Créer cette application à partir de zéro m'a donné une expérience précieuse avec les concepts front-end et back-end, ce qui m'a inspiré pour explorer des projets plus interactifs à l'avenir.

Découvrez mon projet sur GitHub ! :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!