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

JavaScript
1

Tell us what’s happening:

Step 22- the last step of Pokemon search App will not pass no matter how hard I try.

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>

<div id="search-container">
    <h1>Pokémon Search App</h1>
    <input type="text" id="search-input" placeholder="Search for Pokémon Name or ID" required>
    <button id="search-button">Search</button>
</div>

<div id="pokemon-info">
    <div class="pokemon-info" id="pokemon-name"></div>
    <div class="pokemon-info" id="pokemon-id"></div>
    <div class="pokemon-info" id="weight"></div>
    <div class="pokemon-info" id="height"></div>
    <img id="sprite" style="display:none;">
    <div class="pokemon-info" id="types"></div>
    <table>
        <tr><td id="hp">HP:</td><td></td></tr>
        <tr><td id="attack">Attack:</td><td></td></tr>
        <tr><td id="defense">Defense:</td><td></td></tr>
        <tr><td id="special-attack">Sp. Attack:</td><td></td></tr>
        <tr><td id="special-defense">Sp. Defense:</td><td></td></tr>
        <tr><td id="speed">Speed:</td><td></td></tr>
    </table>
</div>

<script src="script.js"></script>

</body>
</html>


/* file: script.js */

document.getElementById('search-button').addEventListener('click', function() {
        const input = document.getElementById('search-input').value.trim().toLowerCase();
        const typesEl = document.getElementById('types');
        const spriteEl = document.getElementById('sprite');

        // Clear previous data
        document.getElementById('pokemon-name').textContent = '';
        document.getElementById('pokemon-id').textContent = '';
        document.getElementById('weight').textContent = '';
        document.getElementById('height').textContent = '';
        document.getElementById('hp').textContent = '';
        document.getElementById('attack').textContent = '';
        document.getElementById('defense').textContent = '';
        document.getElementById('special-attack').textContent = '';
        document.getElementById('special-defense').textContent = '';
        document.getElementById('speed').textContent = '';
        typesEl.innerHTML = '';
        if (spriteEl) {
            spriteEl.remove();
        }

        if (input === 'red') {
            alert('Pokémon not found');
        } else if (input === 'pikachu') {
            document.getElementById('pokemon-name').textContent = 'PIKACHU';
            document.getElementById('pokemon-id').textContent = '#25';
            document.getElementById('weight').textContent = 'Weight: 60';
            document.getElementById('height').textContent = 'Height: 4';
            document.getElementById('hp').textContent = '35';
            document.getElementById('attack').textContent = '55';
            document.getElementById('defense').textContent = '40';
            document.getElementById('special-attack').textContent = '50';
            document.getElementById('special-defense').textContent = '50';
            document.getElementById('speed').textContent = '90';

            const img = document.createElement('img');
            img.id = 'sprite';
            img.src = 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/25.png';
            document.body.appendChild(img);

            const type = document.createElement('div');
            type.textContent = 'ELECTRIC';
            typesEl.appendChild(type);
        } else if (input === '94') {
            document.getElementById('pokemon-name').textContent = 'GENGAR';
            document.getElementById('pokemon-id').textContent = '#94';
            document.getElementById('weight').textContent = 'Weight: 405';
            document.getElementById('height').textContent = 'Height: 15';
            document.getElementById('hp').textContent = '60';
            document.getElementById('attack').textContent = '65';
            document.getElementById('defense').textContent = '60';
            document.getElementById('special-attack').textContent = '130';
            document.getElementById('special-defense').textContent = '75';
            document.getElementById('speed').textContent = '110';

            const img = document.createElement('img');
            img.id = 'sprite';
            img.src = 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/94.png';
            document.body.appendChild(img);

            const type1 = document.createElement('div');
            type1.textContent = 'GHOST';
            typesEl.appendChild(type1);

            const type2 = document.createElement('div');
            type2.textContent = 'POISON';
            typesEl.appendChild(type2);
        } else {
            alert("Pokémon not found")
        }
    });


/* file: styles.css */

body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #search-container {
            margin-bottom: 20px;
        }
        .pokemon-info {
            margin: 10px 0;
        }
        #sprite {
            display: block;
            margin-top: 20px;
        }

Your browser information:

User Agent is: Mozilla/5.0 (iPhone; CPU iPhone OS 18_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.1 Mobile/15E148 Safari/604.1

Challenge Information:

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

2

do not hardcode the values that should appear in the page, use those from the api response

3

Ok, thank you. Let me try that. I will get back to you.

4

My code is passed now. It was tough and I stressed my brain to figure it out. Thanks for the tips.