revisa esto y agrega las características que faltan a mi codigo por favor: - Características

Búsqueda de Pokémon por ID o nombre.

Muestra imagen, tipos, estadísticas y sonidos del Pokémon.

Interfaz responsiva construida con Bootstrap 5.3.3.

Uso de HTML, CSS y JavaScript para la interfaz y la lógica de consumo de API.

Tecnologías Utilizadas

HTML: Estructura de la página.

CSS: Estilizado y diseño responsivo.

JavaScript: Manipulación del DOM y consumo de la API.

Bootstrap 5.3.3: Framework CSS para mejorar la presentación.

PokeAPI: API para obtener los datos de los Pokémon.        - código: <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/styles.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <div id="cont">
        <img id="pokedex" src="./img/pokedex.png" alt="">
        <div id="pokemon-container">
            <img id="pokemon-image" src="" alt="">
            <div id="info-poke">
                <p id="pokemon-id"></p>
                <p id="pokemon-name"></p>
            </div>            
        </div>
        <input type="text" id="pokemonInput" placeholder="Ingresa el ID o nombre del Pokémon">
        <div id="flechas">
        <button type="button" class="btn btn-dark" id="prevButton">⬅︎ Pre </button>
        <button type="button" class="btn btn-dark" id="nextButton"> Next ➡︎</button>
    </div>
    <audio id="pokemon-sound" controls style="display:none"></audio>
</div>
</body>
<script src="./js/script.js"></script>
</html>
@import url(https://fonts.googleapis.com/css2?family=Oxanium:wght@300;400;500;600;700;800&display=swap&#39);

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Oxanium', cursive;
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(#6eb9f5,#ebf5fd);
    padding: 1rem;
}

#cont {
    position: relative;
    width: min(95%, 500px);
    margin: 0 auto;
}

#pokedex {
    width: 100%;
    height: auto;
}

#pokemon-container {
    position: absolute;
    width: 25%;
    max-width: 150px;
    aspect-ratio: 1;
    top: 32%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

#pokemon-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#info-poke {
    display: flex;
    position: relative;
    width: 100%;
    bottom: -1rem;
}

#pokemon-id {
    position: relative;
    font-size: clamp(0.75rem, 2vw, 1rem);
    color: rgb(121, 118, 118);
    bottom: -8rem;
    left: -245%;
    transform: translateX(-50%);
}

#pokemon-name {
    position: absolute;
    font-size: clamp(0.75rem, 2vw, 1rem);
    text-transform: capitalize;
    bottom: -8rem;
    left: 70%;
    transform: translateX(-50%);
}

#flechas {
    position: absolute;
    bottom: 13%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
}

#flechas button {
    font-size: clamp(0.75rem, 1.5vw, 1rem);
    padding: 0.25rem 0.75rem;
}

#pokemonInput {
    position: absolute;
    bottom: 30%;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    padding: 0.5rem;
    border-radius: 10px;
    border: 1px solid #ccc;
    font-size: clamp(0.75rem, 1.5vw, 1rem);
}

@media (max-width: 480px) {
    #pokemon-container {
        width: 30%;
    }
    
    #pokemonInput {
        width: 70%;
        bottom: 32%;
    }
    
    #pokemon-id {
        bottom: -6rem;
        left: 25%;
    }
    
    #pokemon-name {
        bottom: -6rem;
        left: 75%;
    }
}

@media (max-width: 360px) {
    #pokemon-container {
        width: 35%;
    }
    
    #pokemonInput {
        width: 75%;
    }
    
    #flechas button {
        padding: 0.25rem 0.5rem;
    }
}

let currentPokemonId = null;

const getPokemon = (pokemon) => {
    fetch(`https://pokeapi.co/api/v2/pokemon/${pokemon}`)
        .then(res => res.json())
        .then(({ id, name, sprites }) => {
            currentPokemonId = id;

            document.getElementById('pokemon-image').src = sprites.versions["generation-v"]["black-white"].animated.front_default || sprites.front_default;
            document.getElementById('pokemon-name').textContent = `  ${name}`;
            document.getElementById('pokemon-id').textContent = ` ${id}- `;

            playPokemonSound(id);
        })
        .catch(() => resetPokemonDisplay());
};

const resetPokemonDisplay = () => {
    document.getElementById('pokemon-image').src = '';
    document.getElementById('pokemon-name').textContent = '';
    document.getElementById('pokemon-id').textContent = '';
};

document.getElementById('pokemonInput').addEventListener('keypress', (e) => e.key === 'Enter' && getPokemon(e.target.value.toLowerCase()));

document.getElementById('nextButton').addEventListener('click', () => currentPokemonId && getPokemon(++currentPokemonId));
document.getElementById('prevButton').addEventListener('click', () => currentPokemonId > 1 && getPokemon(--currentPokemonId));

const playPokemonSound = (id) => {
    const audio = document.getElementById('pokemon-sound');
    audio.src = `https://raw.githubusercontent.com/PokeAPI/cries/main/cries/pokemon/latest/${id}.ogg`;
    audio.play().catch(console.error);
};