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

Tell us what’s happening:

error 1
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.
error
When the #search-input element contains the value 94 and the #search-button element is clicked, the values in the #pokemon-name, #

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pokémon Search App</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <input type="text" id="search-input" required>
  <button id="search-button">Search</button>

  <div id="pokemon-details">
    <p id="pokemon-name"></p>
    <p id="pokemon-id"></p>
    <p id="weight"></p>
    <p id="height"></p>
    <p id="types"></p>
    <p id="hp"></p>
    <p id="attack"></p>
    <p id="defense"></p>
    <p id="special-attack"></p>
    <p id="special-defense"></p>
    <p id="speed"></p>
    <img id="sprite" src="" alt="">
  </div>

  <script src="script.js"></script>
</body>
</html>

/* file: styles.css */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

#search-input {
  padding: 8px;
  font-size: 16px;
}

#search-button {
  padding: 8px 16px;
  font-size: 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

#search-button:hover {
  background-color: #45a049;
}

#pokemon-details {
  display: none;
  margin-top: 20px;
}

#pokemon-details p {
  margin: 8px 0;
}

#types {
  margin: 8px 0;
}

#types span {
  background-color: #f0f0f0;
  padding: 4px 8px;
  border-radius: 4px;
  margin-right: 4px;
}

#sprite {
  margin-top: 20px;
  max-width: 200px;
}

/* file: script.js */
document.addEventListener('DOMContentLoaded', () => {
  const searchInput = document.getElementById('search-input');
  const searchButton = document.getElementById('search-button');

  searchButton.addEventListener('click', () => {
    const searchValue = searchInput.value.toLowerCase();
    const pokemonDetails = document.getElementById('pokemon-details');
    const typesElement = document.getElementById('types');

    fetch(`https://pokeapi.co/api/v2/pokemon/${searchValue}`)
      .then(response => {
        if (!response.ok) {
          throw new Error('Pokémon not found');
        }
        return response.json();
      })
      .then(data => {
        pokemonDetails.style.display = 'block'; // Show Pokemon details

        document.getElementById('pokemon-name').textContent = data.name.toUpperCase();
        document.getElementById('pokemon-id').textContent = `#${data.id}`;
        document.getElementById('weight').textContent = `Weight: ${data.weight}`;
        document.getElementById('height').textContent = `Height: ${data.height}`;
        document.getElementById('sprite').src = data.sprites.front_default;

        // Clear previous types
        typesElement.innerHTML = '';

        // Add types
        const types = data.types.map(type => type.type.name.toUpperCase());
        types.forEach(type => {
          const typeElement = document.createElement('span');
          typeElement.textContent = type;
          typesElement.appendChild(typeElement);
        });

        const stats = data.stats;
        document.getElementById('hp').textContent = `HP: ${stats[0].base_stat}`;
        document.getElementById('attack').textContent = `Attack: ${stats[1].base_stat}`;
        document.getElementById('defense').textContent = `Defense: ${stats[2].base_stat}`;
        document.getElementById('special-attack').textContent = `Special Attack: ${stats[3].base_stat}`;
        document.getElementById('special-defense').textContent = `Special Defense: ${stats[4].base_stat}`;
        document.getElementById('speed').textContent = `Speed: ${stats[5].base_stat}`;
      })
      .catch(error => {
        alert(error.message);
      });
  });
});

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4 Safari/605.1.15

Challenge Information:

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

You nailed it, but i don’t know how did you get that API ?
https://pokeapi.co/api/v2/pokemon/${searchValue}

If you opened the freeCodeCamp’s PokéAPI Proxy.

You will see that the correct API to use is this:
https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/{name-or-id}


Then, you are handling the response by editing the textContent of each element with its proper data. But if you looked at the test case:

Weight: 60 or 60,
Height: 4 or 4,
35, 55, 40, 50, 50, and 90, respectively.

You can add the text Weight: and Height: only for those two cases but the rest like HP: and Defense: is not accepted by the tests.

Which means that all your #hp , #defense , etc elements should only contain numbers.

#weight and #height elements are only the two elements that you can add text for them before the number.

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