diff --git a/index.html b/index.html index 2c25362e305a42231e897296cc72abed48f6a82c..e656cddca760af23a26561efb6dcfe3349cf0f16 100644 --- a/index.html +++ b/index.html @@ -7,9 +7,18 @@ </head> <body> <h1>Pokémon List</h1> + <button id="no-filter-button">Montrer tout</button> + <button id="filter-button">Filter Pokémon plus lourd que 3kg </button> + <button id="filter-button2">Filter Pokémon de tails inférieure à 1m</button> + <ul id="pokemon-list"></ul> + <script> + const filterButton = document.getElementById("filter-button"); + const filterButton2 = document.getElementById("filter-button2"); + const noFilterButton = document.getElementById("no-filter-button"); + const baseApiUrl = "https://pokeapi.co/api/v2/pokemon" /** @@ -28,7 +37,7 @@ request().then( (data)=> { let pokemons = []; for (let i=0; i < data.length; ++i) { - pokemons.push({"name":data[i].name, "weight": data[i].weight, "height": data[i].height}); + pokemons.push({"name":data[i].name, "weight": data[i].weight/10, "height": data[i].height/10}); } callback(pokemons); }); @@ -44,9 +53,30 @@ listElement.appendChild(li); }); } - // Fetch and display Pokémon fetchPokemonList(displayPokemons, 318); + + /** + * Filter Pokémon with weight > 3kg and height < 1m + */ + function filterPokemons() { + fetchPokemonList((pokemons) => { + const filteredPokemons = pokemons.filter(pokemon => pokemon.weight > 3 ); + displayPokemons(filteredPokemons); + }, 318); // Fetch 318 Pokémon + } + function filterPokemons2() { + fetchPokemonList((pokemons) => { + const filteredPokemons = pokemons.filter(pokemon => pokemon.height < 1 ); + displayPokemons(filteredPokemons); + }, 318); // Fetch 318 Pokémon + } + // Filter and display Pokémon when button is clicked + filterButton.addEventListener("click", filterPokemons); + filterButton2.addEventListener("click", filterPokemons2); + noFilterButton.addEventListener("click", () => { + fetchPokemonList(displayPokemons, 318); + }); </script> </body> </html> \ No newline at end of file