pokedex-html / script.js
MakiAi's picture
Create script.js
5f541e3 verified
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();