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

Tell us what’s happening:

siempre me da problema en javaScript apesar de estar bien el codigo por mas que cambie siempre me da el mismo error

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>
    <h1>Pokémon Search</h1>
    
    <!-- Input para la búsqueda -->
    <input type="text" id="search-input" placeholder="Search by name or ID" />
    <button id="search-button">Search</button>

    <!-- Mostrar información del Pokémon -->
    <div>
        <p id="pokemon-name"></p>
        <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>
        <!-- Imagen del sprite -->
        <img id="sprite" src="" alt="Pokémon Sprite" />
    </div>

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

/* file: script.js */
// Elementos DOM
const searchButton = document.getElementById('search-button');
const searchInput = document.getElementById('search-input');

// Función para hacer la solicitud a la API de Pokémon
async function searchPokemon() {
    const input = searchInput.value.trim().toLowerCase();
    
    if (!input) return; // No hacer nada si el campo está vacío

    const url = `https://pokeapi.co/api/v2/pokemon/${input}`;

    try {
        // Hacer la solicitud a la API
        const response = await fetch(url);
        const data = await response.json();
        
        // Mostrar los datos del Pokémon en la página
        displayPokemonData(data);
    } catch (error) {
        // Si el Pokémon no se encuentra, mostrar una alerta
        alert("Pokémon not found");
    }
}

// Función para mostrar los datos del Pokémon
function displayPokemonData(data) {
    // Limpiar elementos anteriores
    document.getElementById('pokemon-name').innerText = data.name.toUpperCase();
    document.getElementById('pokemon-id').innerText = `ID: ${data.id}`;
    document.getElementById('weight').innerText = `Weight: ${data.weight}`;
    document.getElementById('height').innerText = `Height: ${data.height}`;
    document.getElementById('hp').innerText = `HP: ${data.stats[0].base_stat}`;
    document.getElementById('attack').innerText = `Attack: ${data.stats[1].base_stat}`;
    document.getElementById('defense').innerText = `Defense: ${data.stats[2].base_stat}`;
    document.getElementById('special-attack').innerText = `Special Attack: ${data.stats[3].base_stat}`;
    document.getElementById('special-defense').innerText = `Special Defense: ${data.stats[4].base_stat}`;
    document.getElementById('speed').innerText = `Speed: ${data.stats[5].base_stat}`;

    // Mostrar imagen del sprite
    const sprite = document.getElementById('sprite');
    sprite.src = data.sprites.front_default;

    // Mostrar tipos del Pokémon
    const typesElement = document.getElementById('types');
    typesElement.innerHTML = ""; // Limpiar tipos anteriores
    data.types.forEach(typeInfo => {
        const type = document.createElement('p');
        type.innerText = typeInfo.type.name.toUpperCase();
        typesElement.appendChild(type);
    });
}

// Agregar evento al botón de búsqueda
searchButton.addEventListener('click', searchPokemon);

/* file: styles.css */
/* Fondo y diseño general */
body {
    font-family: 'Roboto', sans-serif;
    background: linear-gradient(to bottom, #3a7bd5, #00d2ff);
    color: white;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    flex-direction: column;
    text-align: center;
}

/* Título principal */
h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    font-weight: 700;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

/* Estilo del input de búsqueda */
input {
    width: 300px;
    padding: 12px;
    font-size: 1re

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:135.0) Gecko/20100101 Firefox/135.0

Challenge Information:

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

¿Qué error estás recibiendo?