Build a Pokémon Search App

Hi, I need your assistance with this. Except for this one, I passed the majority of the tests. Nevertheless, the results display appropriately if you search for the Pokemon’s name or ID. Despite my best efforts, I’m still trapped.


  <input type="text" id="search-input"required>
  <button id="search-button">Search</button>
  <div id="pokemon-info">
    <h2 id="pokemon-name"></h2>
    <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="Pokémon Sprite">
  </div>
  <script src="script.js"></script>
document.getElementById('search-button').addEventListener('click', function() {
    let inputValue = document.getElementById('search-input').value.toLowerCase(); 
    
    inputValue = inputValue.replace(/♀/g, '-f').replace(/♂/g, '-m');
    fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${inputValue}`)
        .then(response => {
            if (!response.ok) {
                throw new Error('Pokémon not found');
            }
            return response.json();
        })
        .then(data => {
            document.getElementById('pokemon-name').innerText = data.name.toUpperCase();
            document.getElementById('pokemon-id').innerText = `#${data.id}`;
            document.getElementById('weight').innerText = `Weight: ${data.weight}`;
            document.getElementById('height').innerText = `Height: ${data.height}`;
            document.getElementById('types').innerHTML = '';
            data.types.forEach(type => {
                const typeElement = document.createElement('span');
                typeElement.textContent = type.type.name.toUpperCase();
                document.getElementById('types').appendChild(typeElement);
            });
            const hpValue = data.stats.find(stat => stat.stat.name === 'hp').base_stat;
            console.log('Actual HP Value:', hpValue);
            document.getElementById('hp').innerText = `HP: ${hpValue}`;
            document.getElementById('attack').innerText = `Attack: ${data.stats.find(stat => stat.stat.name === 'attack').base_stat}`;
            document.getElementById('defense').innerText = `Defense: ${data.stats.find(stat => stat.stat.name === 'defense').base_stat}`;
            document.getElementById('special-attack').innerText = `Special Attack: ${data.stats.find(stat => stat.stat.name === 'special-attack').base_stat}`;
            document.getElementById('special-defense').innerText = `Special Defense: ${data.stats.find(stat => stat.stat.name === 'special-defense').base_stat}`;
            document.getElementById('speed').innerText = `Speed: ${data.stats.find(stat => stat.stat.name === 'speed').base_stat}`;
            
           
            const actualHP = parseInt(hpValue);
            const expectedHP = parseInt(document.getElementById('hp').innerText.split(':')[1].trim()); // Splitting and trimming
            
            
            if (actualHP !== expectedHP) {
                throw new Error(`HP mismatch: expected ${expectedHP}, got ${actualHP}`);
            }
            
            document.getElementById('sprite').src = data.sprites.front_default;
        })
        .catch(error => alert(error.message));
});

I ran your code, and it seems like everything works like it should. I can’t be entirely sure this will solve your problem, but maybe this can be a good start. Looking at the assertion error: “expected ‘HP: 35’ to equal ‘35’”, I’d start with changing how you display the retrieved data.

Maybe try putting the values the tests are looking for inside of a span element with the proper id value. Example:

<p>Special Attack: <span id="special-attack"></span></p>

See if any of the test assertions change after that.

I hope this helps

Also, please look at your Pokemon stats return. When I typed 94 into the search for Gengar, the two types are GHOST, and POISON. Your code returns GHOSTPOISON in that element. I can see that those are two individual tags, but they are missing their proper class.

Example:

<span>GHOST</span>
<!-- Should have a class like: -->
<span class="ghost">GHOST</span>

I hope this can help you out as well.