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

Tell us what’s happening:

Im not sure why the test that starts with :

“When the #search-input element contains the value Pikachu”

and the test that starts with:

“When the #search-input element contains the value 94 and”

arent passing when I put those terms into the search each of those items are correct and present

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Pokémon Search App</title>
    <link rel="stylesheet" href="style.css"> <!-- Optional: Link to your CSS -->
</head>
<body>
    <h1>Pokémon Search App</h1>
    <div>
        <input type="text" id="search-input" placeholder="Enter Pokémon name or ID" required>
        <button id="search-button">Search</button>
    </div>
    <div>
        <h2>Pokémon Information</h2>
        <p id="pokemon-name"></p>
        <p id="pokemon-id"></p>
        <p id="weight"></p>
        <p id="height"></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>
        <div id="types"></div> <!-- This will contain the Pokémon types -->
        <img id="sprite" style="display: none;"> <!-- Hidden by default -->
    </div>
    <script src="script.js"></script> <!-- Link to your JavaScript -->
</body>
</html>

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

input {
    padding: 5px;
}

button {
    padding: 5px;
}

h2 {
    margin-top: 20px;
}

img {
    width: 100px; /* Adjust as needed */
}

/* file: script.js */
document.getElementById('search-button').addEventListener('click', async () => {
    const searchInput = document.getElementById('search-input').value.trim().toLowerCase();
    const apiUrl = `https://pokeapi.co/api/v2/pokemon/${searchInput}`;

    try {
        const response = await fetch(apiUrl);

        if (response.status === 404) {
            alert("Pokémon not found");
            return;
        }

        const data = await response.json();

        // Assign values to the elements
        document.getElementById('pokemon-name').textContent = data.name.toUpperCase(); // PIKACHU
        document.getElementById('pokemon-id').textContent = `#${data.id}`; // #25
        document.getElementById('weight').textContent = `Weight: ${data.weight}`; // Weight: 60
        document.getElementById('height').textContent = `Height: ${data.height}`; // Height: 4
        
        const statsMap = {
            hp: 'HP',
            attack: 'Attack',
            defense: 'Defense',
            'special-attack': 'Special Attack',
            'special-defense': 'Special Defense',
            speed: 'Speed'
        };

        data.stats.forEach(stat => {
            const statName = stat.stat.name;
            const statValue = stat.base_stat;

            if (statName in statsMap) {
                document.getElementById(statName).textContent = `${statsMap[statName]}: ${statValue}`;
            }
        });

        // Update Pokémon sprite
        const sprite = document.getElementById('sprite');
        sprite.src = data.sprites.front_default; // Assign the front_default sprite
        sprite.style.display = 'block';

        // Update Pokémon types
        const typesDiv = document.getElementById('types');
        typesDiv.innerHTML = ''; // Clear any existing content

        data.types.forEach(type => {
            const typeElem = document.createElement('p');
            typeElem.textContent = type.type.name.toUpperCase(); // ELECTRIC
            typesDiv.appendChild(typeElem);
        });

    } catch (error) {
        console.error('Error fetching Pokémon:', error);
        alert("An error occurred while fetching Pokémon data");
    }
});

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36

Challenge Information:

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


If you open the console and submit, then look at the assert message, you can see the value and expected value.

The test is not expecting your text to be part of the value (don’t use the same element with that id for the text and value).

1 Like

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