let pokemonList = []; async function loadPokemon() { const promises = []; // Fetch data for Pokémon #1 to #251 for (let i = 1; i <= 251; i++) { promises.push(fetch(`https://pokeapi.co/api/v2/pokemon/${i}`).then(res => res.json())); } const pokemonData = await Promise.all(promises); pokemonList = pokemonData.map((data, index) => ({ number: String(index + 1).padStart(3, '0'), // e.g., "001" name: data.name, sprite: data.sprites.versions['generation-ii'].crystal.front_default // Animated Crystal sprite })); // Populate the list const ul = document.getElementById('pokemon-list'); pokemonList.forEach(pokemon => { const li = document.createElement('li'); li.textContent = `#${pokemon.number} - ${pokemon.name}`; li.dataset.number = pokemon.number; ul.appendChild(li); }); } document.getElementById('pokemon-list').addEventListener('click', function(event) { if (event.target.tagName === 'LI') { const number = event.target.dataset.number; const pokemon = pokemonList.find(p => p.number === number); if (pokemon) { document.getElementById('pokemon-sprite').src = pokemon.sprite; document.getElementById('pokemon-name').textContent = `#${pokemon.number} ${pokemon.name}`; } } }); async function init() { await loadPokemon(); // Display the first Pokémon (Bulbasaur) by default if (pokemonList.length > 0) { const firstPokemon = pokemonList[0]; document.getElementById('pokemon-sprite').src = firstPokemon.sprite; document.getElementById('pokemon-name').textContent = `#${firstPokemon.number} ${firstPokemon.name}`; } } init();