first commit

pokemonAPI/js/api.js

@@ -0,0 +1,88 @@
+const pokeUrlApi = 'https://pokeapi.co/api/v2/';
+const getAllPokemonsApi = async () => {
+    return fetch(`${pokeUrlApi}pokemon?offset=0&limit=10`)
+        .then((response) => response.json())
+        .then((data) => {
+            return data.results.map((pokemon) => {
+                return {
+                    id: pokemon.url.split('/')[6],
+                    name: pokemon.name,
+                    img: `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.url.split('/')[6]}.png`,
+                }
+            })
+        })
+}
+
+function createListHtml(elements){
+    const list = document.createElement('ul');
+
+    elements.forEach((element) => {
+        const listItem = document.createElement('li');
+        listItem.classList.add('pokemon-item');
+        listItem.textContent = element.name;
+
+        listItem.addEventListener('click', async () => {
+            const existingDetails = listItem.querySelector('div');
+            if (existingDetails) {
+                existingDetails.remove();
+                return;
+            }
+
+            const pokeData = await loadPokemonDatas(element.name);
+            const details = document.createElement('div');
+            details.innerHTML = `
+                <h3>${pokeData.name} (#${pokeData.id})</h3>
+                <img src="${pokeData.img}" alt="${pokeData.name}">
+                <p>Height: ${pokeData.height / 10} m</p>
+                <p>Weight: ${pokeData.weight / 10} kg</p>
+                <p>Types: ${pokeData.types}</p>
+            `;
+            listItem.appendChild(details);
+            details.style.display = 'block';
+        });
+
+        list.appendChild(listItem);
+    });
+
+    document.querySelector('body').appendChild(list);
+}
+
+function loadPokemonDatas(name) {
+    if (!name) {
+        console.error('No Pokémon name provided');
+        return Promise.reject('No Pokémon name provided');
+    }
+    return fetch(`${pokeUrlApi}pokemon/${name}`)
+        .then((response) => response.json())
+        .then((data) => {
+            console.log(data);
+            return {
+                id: data.id,
+                name: data.name,
+                img: data.sprites.front_default,
+                height: data.height,
+                weight: data.weight,
+                types: data.types.map(typeInfo => typeInfo.type.name).join(', '),
+                displayed: false
+            }
+        });
+}
+
+document.addEventListener('DOMContentLoaded', async () => {
+    var divLoading = document.querySelector('#loader');
+
+    try{
+        const pokeapi = await getAllPokemonsApi();
+
+        if(pokeapi) {
+            createListHtml(pokeapi);
+            divLoading.style.display = 'none';
+        }
+    } catch (error) {
+        console.error('Error fetching Pokémon data:', error);
+        divLoading.style.display = 'none';
+        const errorElement = document.createElement('p');
+        errorElement.textContent = 'Failed to load Pokémon data.';
+        document.querySelector('#pokemons').appendChild(errorElement);
+    }
+});