Skip to content
Snippets Groups Projects
Commit 3ec41d12 authored by AIT LAMINE Ilias's avatar AIT LAMINE Ilias
Browse files

Merge branch 'ilias_branch' into 'main' 

feat: ajout du filtrage. Ref #2

See merge request !5
parents f14d6169 25da1396
Branches
No related tags found
1 merge request!5feat: ajout du filtrage. Ref #2
Hide whitespace changes
Inline Side-by-side
Showing
with 32 additions and 2 deletions
index.html
+ 32
− 2
View file @ 3ec41d12
......@@ -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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment