Pokemon APP not letting me pass

JavaScript
1

Hi, I have the same problem every time I try to complete the Pokemon app. :smiling_face_with_tear: The app actually works and gives the desired results, but I still can’t pass the test because I have alawys the two following open points.

  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.

  2. When the #search-input element contains the value 94 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 GENGAR , #94 or 94 , Weight: 405 or 405 , Height: 15 or 15 , 60 , 65 , 60 , 130 , 75 , and 110 , respectively.

Here is my Code:

HTML

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pokémon Search App</title>
    <style>
        #types div {
            display: inline-block;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" id="search-input" required placeholder="Enter Pokémon name or ID">
        <button id="search-button">Search</button>
    </div>
    <div>
        <p id="pokemon-name"></p>
        <p id="pokemon-id"></p>
        <p id="weight"></p>
        <p id="height"></p>
        <div id="types"></div>
        <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" alt="Pokémon sprite">
    </div>
    <script src="script.js"></script>
</body>
</html>

JS

const searchInput = document.getElementById("search-input");
const searchBtn = document.getElementById("search-button");
const pokemonName = document.getElementById("pokemon-name");
const pokemonId = document.getElementById("pokemon-id");
const weight = document.getElementById("weight");
const height = document.getElementById("height");
const types = document.getElementById("types");
const hp = document.getElementById("hp");
const attack = document.getElementById("attack");
const defense = document.getElementById("defense");
const specialAttack = document.getElementById("special-attack");
const specialDefence = document.getElementById("special-defense");
const speed = document.getElementById("speed");
const sprite = document.getElementById("sprite");

const pokemonAPI = "https://pokeapi.co/api/v2/pokemon";

searchBtn.addEventListener("click", searchBtnFunc);

function searchBtnFunc() {
    const input = searchInput.value.trim().toLowerCase();

    if (!input) {
        alert("Please type in a Pokémon name or ID");
        return;
    }

    const isNumeric = !isNaN(input);
    const query = isNumeric ? input : input.toLowerCase();

    fetchPokemonData(query);
}

function fetchPokemonData(query) {
    fetch(`${pokemonAPI}/${query}`)
        .then(response => {
            if (!response.ok) {
                throw new Error('Pokémon not found');
            }
            return response.json();
        })
        .then(data => {
            displayPokemonTraits(data);
            searchInput.readOnly = true;
        })
        .catch(error => {
            alert(error.message);
            resetFields();
        });
}

function displayPokemonTraits(traitData) {
    pokemonName.textContent = traitData.name.toUpperCase();
    pokemonId.textContent = `#${traitData.id}`;
    weight.textContent = `Weight: ${traitData.weight}`;
    height.textContent = `Height: ${traitData.height}`;

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

    // Display Pokémon types
    traitData.types.forEach(typeInfo => {
        const typeElement = document.createElement('div');
        typeElement.textContent = typeInfo.type.name.toUpperCase();
        types.appendChild(typeElement);
    });

    // Display Pokémon stats
    hp.textContent = `HP: ${traitData.stats.find(stat => stat.stat.name === 'hp').base_stat}`;
    attack.textContent = `Attack: ${traitData.stats.find(stat => stat.stat.name === 'attack').base_stat}`;
    defense.textContent = `Defense: ${traitData.stats.find(stat => stat.stat.name === 'defense').base_stat}`;
    specialAttack.textContent = `Special Attack: ${traitData.stats.find(stat => stat.stat.name === 'special-attack').base_stat}`;
    specialDefence.textContent = `Special Defense: ${traitData.stats.find(stat => stat.stat.name === 'special-defense').base_stat}`;
    speed.textContent = `Speed: ${traitData.stats.find(stat => stat.stat.name === 'speed').base_stat}`;

    // Display Pokémon sprite
    sprite.src = traitData.sprites.front_default;
    sprite.alt = `${traitData.name} sprite`;
}

function resetFields() {
    searchInput.value = '';
    pokemonName.textContent = '';
    pokemonId.textContent = '';
    weight.textContent = '';
    height.textContent = '';
    types.innerHTML = ''; // Clear types container
    hp.textContent = '';
    attack.textContent = '';
    defense.textContent = '';
    specialAttack.textContent = '';
    specialDefence.textContent = '';
    speed.textContent = '';
    sprite.src = ''; // Clear sprite
    sprite.alt = '';

    searchInput.readOnly = false;
}

I know I must have missed something. Can someone please help me? :sweat_smile:

2

when you ask for help, please always include a link to the step/project

3

this is not the API you should use

to see more details from the test I have opened the browser console with F12, and I see things like this:

Error: AssertionError: expected 'HP: 35' to equal '35'

make sure you are adding the right thing in the elements

1 Like
4

Thank you for your Feedback. :smiling_face_with_three_hearts: I musst have mist that. It works now :laughing: