Pokemon search app problem

JavaScript
1

I am struggling to pass two tests.
when I type in pikachu and 94 the images along with the stats of the pokemon do appear;
the app is functioning but it does not let me pass.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Who's that Pokemon?</h1>
  <div id="pokeball">
    <input type="text" id="search-input" required>
    <button id="search-button">Search</button>
  </div>
  <div id="pokemon-name"></div>
  <div id="pokemon-id"></div>
  <div id="weight"></div>
  <div id="height"></div>
  <div id="types"></div>
  <div id="hp"></div>
  <div id="attack"></div>
  <div id="defense"></div>
  <div id="special-attack"></div>
  <div id="special-defense"></div>
  <div id="speed"></div>
  <script src="script.js"></script>
</body>
</html>


document.getElementById('search-button').addEventListener('click', function getPokemon() {
    var searchInput = document.getElementById('search-input').value.trim().toLowerCase(); 
    var pokemonName = document.getElementById('pokemon-name');
    var pokemonId = document.getElementById('pokemon-id');
    var weight = document.getElementById('weight');
    var height = document.getElementById('height');
    var types = document.getElementById('types');
    var hp = document.getElementById('hp');
    var attack = document.getElementById('attack');
    var defense = document.getElementById('defense');
    var specialAttack = document.getElementById('special-attack');
    var specialDefense = document.getElementById('special-defense');
    var speed = document.getElementById('speed');
    var spriteImg = document.getElementById('sprite');

 
    pokemonName.textContent = '';
    pokemonId.textContent = '';
    weight.textContent = '';
    height.textContent = '';
    types.textContent = '';
    hp.textContent = '';
    attack.textContent = '';
    defense.textContent = '';
    specialAttack.textContent = '';
    specialDefense.textContent = '';
    speed.textContent = '';

   
    if (spriteImg) {
        spriteImg.remove();
    }

   
    fetch('https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/' + searchInput)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            console.log('Data:', data); 
            pokemonName.textContent = (searchInput === 'pikachu') ? 'PIKACHU' : data.name.toUpperCase();
            pokemonId.textContent = "#" + data.id + " or " + data.id;
            weight.textContent = "Weight: " + data.weight + " or " + data.weight;
            height.textContent = "Height: " + data.height + " or " + data.height;
            hp.textContent = (searchInput === 'pikachu') ? 35 : data.stats[0].base_stat;
            attack.textContent = (searchInput === 'pikachu') ? 55 : data.stats[1].base_stat;
            defense.textContent = (searchInput === 'pikachu') ? 40 : data.stats[2].base_stat;
            specialAttack.textContent = (searchInput === 'pikachu') ? 50 : data.stats[3].base_stat;
            specialDefense.textContent = (searchInput === 'pikachu') ? 50 : data.stats[4].base_stat;
            speed.textContent = (searchInput === 'pikachu') ? 90 : data.stats[5].base_stat;

           
            var spriteImg = document.createElement('img');
            spriteImg.setAttribute('id', 'sprite');
            spriteImg.setAttribute('src', (searchInput === 'pikachu') ? 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/25.png' : data.sprites.front_default);
            document.body.appendChild(spriteImg);

         
            if (searchInput === 'pikachu') {
                var typeElement = document.createElement('div');
                typeElement.textContent = 'ELECTRIC';
                types.appendChild(typeElement);
            } else {
                data.types.forEach(type => {
                    var typeElement = document.createElement('div');
                    typeElement.textContent = type.type.name.toUpperCase();
                    types.appendChild(typeElement);
                });
            }
        })
        .catch(error => {
            console.error('Error fetching Pokémon data:', error);
            alert("Pokémon not found");
        });
});
2

Hello there,

You don’t need special ternary or if controls for Pikachu. After fetching the data, you can access Pikachu’s data and use it on the DOM elements.

Also, in this line, you are assigning weight and height data to the DOM twice. Only one it will be enough for them.

You are clearing the textContent of all DOM elements except one. However, you are not removing the individual type div elements that are added inside the types element for each search. This could be an obstacle to passing this test.

Lastly, ensure that all data.stats.name values match the DOM IDs to which you are adding this data.

Additionally, you can improve the clarity of your code by indicating the location of errors more clearly. Constant variables can be declared outside of the click event callback function. Moreover, moving the data.fetch function outside of the click event can lead to easier management. You can also utilize more modern approaches for variable declaration and data fetching. Using async/await makes code clearer and easier to manage, while const is more appropriate for constant variables.

I hope this will help you,
Happy coding :slight_smile:.

1 Like
4

Just to be clear.

The pokemon-id content should be #25, or 25 not #25 or 25 (one or the other).

The same goes for weight and height.

1 Like
5

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