Created a basic Pokémon encyclopedia using JavaScript

Other Questions JavaScript
1

Hey everyone! I’m super excited to share my latest project with you all. I’ve been learning JavaScript and decided to put my skills to the test by making a simple Pokémon encyclopedia (or Pokédex for short).

It’s pretty basic right now, but I’m really proud of what I’ve accomplished so far. The Pokédex lets you search for Pokémon by name or number, and it displays some basic info like their type, height, and weight.

I used the PokeAPI to fetch the data, and I’m still figuring out how to handle errors and add more features. Has anyone else tried making something similar? I’d love to hear your thoughts or get some tips on how to improve it.

Here’s a snippet of my code:

function fetchPokemon(name) {
  const apiUrl = `https://pokeapi.co/api/v2/pokemon/${name.toLowerCase()}`;
  
  fetch(apiUrl)
    .then(response => response.json())
    .then(data => {
      displayPokemonInfo(data);
    })
    .catch(error => {
      console.error('Error fetching Pokémon data:', error);
    });
}

function displayPokemonInfo(pokemon) {
  const infoDiv = document.getElementById('pokemonInfo');
  infoDiv.innerHTML = `
    <h2>${pokemon.name}</h2>
    <p>Type: ${pokemon.types.map(type => type.type.name).join(', ')}</p>
    <p>Height: ${pokemon.height / 10} m</p>
    <p>Weight: ${pokemon.weight / 10} kg</p>
  `;
}

What do you think? Any suggestions for making it better?

2

Cool project! I’ve dabbled with PokeAPI too and it’s a great resource for learning. One thing that really improved my Pokedex was adding sprite images. The API provides URLs for different Pokemon artwork, so you can easily display them alongside the stats.

Here’s a quick example of how you could modify your displayPokemonInfo function:

function displayPokemonInfo(pokemon) {
  const infoDiv = document.getElementById('pokemonInfo');
  infoDiv.innerHTML = `
    <h2>${pokemon.name}</h2>
    <img src='${pokemon.sprites.front_default}' alt='${pokemon.name}'>
    <p>Type: ${pokemon.types.map(type => type.type.name).join(', ')}</p>
    <p>Height: ${pokemon.height / 10} m</p>
    <p>Weight: ${pokemon.weight / 10} kg</p>
  `;
}

This small change adds a lot of visual appeal. You could also consider adding a ‘flavor text’ description from the species endpoint to give each Pokemon more character. Keep experimenting and have fun with it!

3

Great work on your Pokémon encyclopedia project! It’s an excellent way to apply JavaScript skills. I’ve worked on something similar and found it incredibly rewarding. One suggestion I’d make is to implement caching for the API responses. This can significantly improve performance, especially for frequently searched Pokémon. You could use localStorage for this:

function fetchPokemon(name) {
  const cachedData = localStorage.getItem(name);
  if (cachedData) {
    displayPokemonInfo(JSON.parse(cachedData));
    return;
  }

  // Your existing fetch code here
  // After successful fetch, add:
  localStorage.setItem(name, JSON.stringify(data));
}

This approach reduces API calls and speeds up your app. Additionally, consider adding a feature to display Pokémon abilities or moves. It adds depth to your Pokédex without overly complicating the code. Keep up the great work!

4

nice work on ur pokedex! ive made somthing similar before. one thing u could add is a search history feature. it’d be cool to see which pokemon u looked up recently. maybe use an array to store the last 5 searches? keep it up, your projects sounds awsome!