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

Curriculum Help
1

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

2

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.