Build a Pokémon Search App Project - Build a Pokémon Search App

JavaScript
1

THERE IS A BUG IN THE PROJECT

I don’t know what is the error cause everything looks good when I did the test it showed what the tests ask for can someone help me
Error Test: When the #search-input element contains the value Pikachu and the #search-button element is clicked, the values in the #pokemon-name , #pokemon-id , #weight , #height , #hp , #attack , #defense , #special-attack , #special-defense , and #speed elements should be PIKACHU , #25 or 25 , Weight: 60 or 60 , Height: 4 or 4 , 35 , 55 , 40 , 50 , 50 , and 90 , respectively. Values are right
Error: TypeError: Cannot read properties of undefined (reading ‘front_default’)

My JS Code

const pokemonID = document.getElementById('pokemon-id');
const pokemonName = document.getElementById('pokemon-name');
const spriteContainer = document.getElementById('sprite-container');
const types = document.getElementById('types');
const height = document.getElementById('height');
const weight = document.getElementById('weight');
const hp = document.getElementById('hp');
const attack = document.getElementById('attack');
const defense = document.getElementById('defense');
const specialAttack = document.getElementById('special-attack');
const specialDefense = document.getElementById('special-defense');
const speed = document.getElementById('speed');
const searchForm = document.getElementById('search-form');
const searchInput = document.getElementById('search-input');

const getPokemon = async () => {
  try {
    const pokemonNameOrId = searchInput.value.toLowerCase();
    const response = await fetch(
      `https://pokeapi.co/api/v2/pokemon/${pokemonNameOrId}`
    );
    const data = await response.json();

    // Check if the response contains an error
    if (data.error) {
      resetDisplay();
      alert('Pokémon not found');
      console.log(`Pokémon not found: ${data.error}`);
      return;
    }

    // Set Pokémon info
    pokemonName.textContent = `${data.name ? data.name.toUpperCase() : 'Unknown'}`;
    pokemonID.textContent = `#${data.id}`;
    weight.textContent = `Weight: ${data.weight}`;
    height.textContent = `Height: ${data.height}`;
    
    // Set sprite
    const sprite = new Image();
    sprite.src = data.sprites.front_default;
    sprite.alt = `${data.name} front default sprite`;
    sprite.id = 'sprite';
    spriteContainer.innerHTML = '';
    spriteContainer.appendChild(sprite);

    // Set stats
    hp.textContent = `HP: ${data.stats[0].base_stat}`;
    attack.textContent = `Attack: ${data.stats[1].base_stat}`;
    defense.textContent = `Defense: ${data.stats[2].base_stat}`;
    specialAttack.textContent = `Special Attack: ${data.stats[3].base_stat}`;
    specialDefense.textContent = `Special Defense: ${data.stats[4].base_stat}`;
    speed.textContent = `Speed: ${data.stats[5].base_stat}`;

    // Set types
    types.innerHTML = data.types
      .map(obj => `<span class="type ${obj.type.name}">${obj.type.name}</span>`)
      .join('');
  } catch (err) {
    resetDisplay();
    if (err instanceof SyntaxError) {
      alert('Pokémon not found');
      console.log(`Pokémon not found: ${err}`);
    } else {
      console.log(`Error: ${err}`);
    }
  }
};

const resetDisplay = () => {
  spriteContainer.innerHTML = '';
  pokemonName.textContent = '';
  pokemonID.textContent = '';
  weight.textContent = '';
  height.textContent = '';
  hp.textContent = '';
  attack.textContent = '';
  defense.textContent = '';
  specialAttack.textContent = '';
  specialDefense.textContent = '';
  speed.textContent = '';
  types.innerHTML = '';
};

searchForm.addEventListener('click', getPokemon);

Challenge Information:

Build a Pokémon Search App Project - Build a Pokémon Search App

2

Is async a required element? That might be throwing it off.

1 Like
3

Could you share your HTML as well? It’s required to fully reproduce the working code.

1 Like
4

Thanks for help here it is

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Pokémon Search App</title>
</head>
<body>
  <main>
    <h1>Pokémon Search App</h1>
    <div class="container">
      <form id="search-form">
        <label for="search-input">Search for Pokémon Name or ID:</label>
        <input type="text" id="search-input" required>
        <button type="button" id="search-button">Search</button>
      </form>
      <div class="output">
        <div class="top-container">
          <div class="name-and-id">
            <span id="pokemon-name"></span>
            <span id="pokemon-id"></span>
          </div>
          <div class="size">
            <span id="weight"></span>
            <span id="height"></span>
          </div>
          <div id="sprite-container" class="sprite-container"></div>
          <div id="types"></div>
        </div>
        <div class="bottom-container">
          <table>
            <tr>
              <th>Base</th>
              <th>Stats</th>
            </tr>
            <tr>
              <td>HP:</td>
              <td id="hp"></td>
            </tr>
            <tr>
              <td>Attack:</td>
              <td id="attack"></td>
            </tr>
            <tr>
              <td>Defense:</td>
              <td id="defense"></td>
            </tr>
            <tr>
              <td>Sp. Attack:</td>
              <td id="special-attack"></td>
            </tr>
            <tr>
              <td>Sp. Defense:</td>
              <td id="special-defense"></td>
            </tr>
            <tr>
              <td>Speed:</td>
              <td id="speed" class="speed"></td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <script src="script.js"></script>
  </main>
</body>
</html>
5

Ok thanks I’m gonna try

6

Make sure the elements with the name, id, stats contain only what is required by test.

1 Like
7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.