Creating My Pokémon Collection App: Local Data, Interactivity, and JavaScript Events

Introduction

When I started this project, my goal was simple: to create a Pokémon collection app where users could explore Pokémon and their details. By combining JavaScript, Node.js, and local data, I built an interactive app that allows users to view Pokémon images, abilities, and types—all while refining my skills with event listeners, dynamic content updates, and more. While I worked on this with a partner, I am going to focus on my work specifically. Here’s how it came together!

Project Overview

This app is designed to showcase a collection of Pokémon images and stats, making it easy for users to click on each Pokémon to view details and switch between main and alternate images with hover interactions. I served the Pokémon data locally, which allowed me to focus on how to render, update, and interact with the data within the app itself.

Setting Up Local Data with db.json

Instead of pulling from an external API, I created a local db.json file with Pokémon data, including attributes like name, type, ability, and image paths. Running a local server on http://localhost:3500/pokemon, I could fetch this data using the fetch method in JavaScript. The simplified setup allowed me to build and test the app entirely offline.

Code Walkthrough

Here’s a look at how I approached key parts of the project.

1. Fetching Data: The first step was to fetch Pokémon data from the local server. I created a getAllPokemon function to handle the fetch request and return the Pokémon details in JSON format.

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

This function pulls in the Pokémon data from http://localhost:3500/pokemon, which I then use to dynamically render each Pokémon.

1. Displaying Pokémon: To populate the collection, I used a displayPokemons function that iterates through the fetched Pokémon data and renders each item as an image. I also added a click event listener on each image, which opens up the Pokémon details when selected:

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

The renderPokemon function creates an image for each Pokémon, adds styling, and attaches a click event to display details.

1. Event Listeners: Adding Interactivity I used two main types of event listeners in this project: a form submit listener for adding new Pokémon and mouseover/mouseout events to toggle between images. These listeners made the app more engaging and user-friendly.

• Form Submission:
  
  To add a new Pokémon, I set up a submit listener on the form, which gathers values from input fields and adds the new Pokémon to the collection. This new Pokémon is rendered without needing to refresh the page:
  

   pokemonForm.addEventListener("submit", event => {
     event.preventDefault();
     const newPokemon = {
       name: event.target.name.value,
       type: event.target.type.value,
       ability: event.target.ability.value,
       image: event.target.image.value,
       altImage: event.target.altImage.value,
     };
     renderPokemon(newPokemon);
     event.target.reset();
   });
  

  Here, event.preventDefault() stops the form from reloading the page, ensuring a smooth user experience.

• Mouseover Event for Alternate Images:
  
  When users hover over the Pokémon’s image in the details section, it switches to an alternate image, simulating an evolution or transformation. The mouseover event triggers this switch, while mouseout reverts it back:
  

   function handleClick(pokemon) {
     const detailImage = el('detail-image');
     detailImage.src = pokemon.image;
     el('detail-name').textContent = pokemon.name;
     el('detail-type').textContent = pokemon.type;
     el('detail-ability').textContent = pokemon.ability;
  
     detailImage.addEventListener('mouseover', () => {
       detailImage.src = pokemon.altImage;
     });
     detailImage.addEventListener('mouseout', () => {
       detailImage.src = pokemon.image;
     });
   }
  

  This effect gives users a fun way to interact with each Pokémon and visually explore its characteristics.

Challenges and Learning Points

One challenge was structuring the JavaScript to keep it modular and manageable, as event listeners and dynamic elements can quickly become hard to track. I learned to compartmentalize my code into smaller functions and to use event listeners selectively to optimize performance and readability.

Wrapping Up

This Pokémon collection project was an exciting way to apply JavaScript, experiment with local data fetching, and add engaging event-driven interactivity. Building this app from scratch gave me valuable experience with both front-end and back-end concepts, leaving me inspired to explore more interactive projects in the future.

Check out my project on GitHub!:

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