diff --git a/script.js b/script.js index a4056353a6d88e4910d13afcdc422e0a2ccb6fec..22df854a8db6d326681b03fe3a166a8d235efc38 100644 --- a/script.js +++ b/script.js @@ -1,22 +1,27 @@ -const pokemons = [ - { name: "Beedrill", weight: 29.5, height: 1 }, - { name: "Blastoise", weight: 85.5, height: 1.6 }, - { name: "Bulbasaur", weight: 6.9, height: 0.7 }, - { name: "Butterfree", weight: 32, height: 1.1 }, - { name: "Caterpie", weight: 2.9, height: 0.3 } -]; - -function displayPokemonList() { - const listElement = document.getElementById("pokemon-list"); - listElement.innerHTML = ""; - - pokemons.forEach(pokemon => { - const listItem = document.createElement("li"); - listItem.textContent = `${pokemon.name} - ${pokemon.weight}kg - ${pokemon.height}m`; - listElement.appendChild(listItem); +// Récupérer les Pokémon via l'API +function fetchPokemonList(callback, limit = 20) { + const baseApiUrl = "https://pokeapi.co/api/v2/pokemon"; + const url = baseApiUrl + "?limit=" + limit; + const request = async () => { + const response = await fetch(url); + const json = await response.json(); + let promisesArray = json["results"].map(result => { + return fetch(result.url).then(response => response.json()); + }); + return Promise.all(promisesArray); + }; + request().then((data) => { + let pokemons = []; + for (let i = 0; i < data.length; ++i) { + pokemons.push({ + "name": data[i].name, + "weight": data[i].weight / 10, // Convert to kg + "height": data[i].height / 10 // Convert to m + }); + } + callback(pokemons); }); } -document.addEventListener("DOMContentLoaded", displayPokemonList); function displayPokemons(list) { const container = document.getElementById("pokemon-list"); @@ -28,11 +33,23 @@ function displayPokemons(list) { }); } +fetchPokemonList((pokemons) => { + displayPokemons(pokemons); +}); + // Filtrage -document.getElementById("all").addEventListener("click", () => displayPokemons(pokemons)); +document.getElementById("all").addEventListener("click", () => fetchPokemonList((pokemons) => { + displayPokemons(pokemons); +})); + document.getElementById("weight").addEventListener("click", () => { - displayPokemons(pokemons.filter(p => p.weight > 3)); + fetchPokemonList((pokemons) => { + displayPokemons(pokemons.filter(p => p.weight > 3));} + ); }); + document.getElementById("height").addEventListener("click", () => { - displayPokemons(pokemons.filter(p => p.height < 1)); -}); \ No newline at end of file + fetchPokemonList((pokemons) => { + displayPokemons(pokemons.filter(p => p.height < 1)); + }); +});