Create script.js

script.js

@@ -0,0 +1,48 @@
+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();