commit dc9fbfea379d592dcfb3dc1a8aecc375681421db Author: mrtoine Date: Fri Sep 12 11:10:19 2025 +0200 first commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e43b0f9 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.DS_Store diff --git a/pokemonAPI/css/style.css b/pokemonAPI/css/style.css new file mode 100644 index 0000000..e69de29 diff --git a/pokemonAPI/index.html b/pokemonAPI/index.html new file mode 100644 index 0000000..a0be7ec --- /dev/null +++ b/pokemonAPI/index.html @@ -0,0 +1,49 @@ + + + + + + PokéDex - Découvrez l'univers Pokémon + + + + +
+ +
+

PokéDex

+

Explorez l'univers magique des Pokémon

+
+ + +
+
+ + +
+
+ + +
+ + + + + + + +
+ +
+
+
+ + + + + + \ No newline at end of file diff --git a/pokemonAPI/js/api.js b/pokemonAPI/js/api.js new file mode 100644 index 0000000..849962f --- /dev/null +++ b/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 = ` +

${pokeData.name} (#${pokeData.id})

+ ${pokeData.name} +

Height: ${pokeData.height / 10} m

+

Weight: ${pokeData.weight / 10} kg

+

Types: ${pokeData.types}

+ `; + 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); + } +}); \ No newline at end of file diff --git a/pokemonAPI/js/loader.js b/pokemonAPI/js/loader.js new file mode 100644 index 0000000..8d51c4b --- /dev/null +++ b/pokemonAPI/js/loader.js @@ -0,0 +1,16 @@ +/*var toogle = true; +function showLoader() { + const loaderDiv = document.querySelector('#loader'); + if(toogle) { + loaderDiv.textContent = "...Chargement" + } + else { + loaderDiv.textContent = "Chargement..."; + } + toogle = !toogle; +} + +document.addEventListener('DOMContentLoaded', () => { + showLoader(); + setInterval(showLoader, 1000); +});*/ \ No newline at end of file