Spaces:
Running
Running
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(); |