diff --git a/index.html b/index.html
index 078d40164db20c44748c724fea52a796ae6d7f60..8b7a0f42487e023dee5c0f02009e294dff56e702 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,9 @@
</head>
<body>
<h1>Liste de Pokémon</h1>
+ <button id="all">Tous</button>
+ <button id="weight">+ de 3kg</button>
+ <button id="height">- de 1m</button>
<ul id="pokemon-list"></ul>
<script src="script.js"></script>
</body>
diff --git a/script.js b/script.js
index 7c602e97894c9f0e0569fe0b4fa9eed3a0d8058f..a4056353a6d88e4910d13afcdc422e0a2ccb6fec 100644
--- a/script.js
+++ b/script.js
@@ -12,10 +12,27 @@ function displayPokemonList() {
pokemons.forEach(pokemon => {
const listItem = document.createElement("li");
- listItem.textContent = `${pokemon.name} - Poids: ${pokemon.weight} kg - Taille: ${pokemon.height} m`;
+ listItem.textContent = `${pokemon.name} - ${pokemon.weight}kg - ${pokemon.height}m`;
listElement.appendChild(listItem);
});
}
-
-// Afficher la liste au chargement de la page
document.addEventListener("DOMContentLoaded", displayPokemonList);
+
+function displayPokemons(list) {
+ const container = document.getElementById("pokemon-list");
+ container.innerHTML = "";
+ list.forEach(pokemon => {
+ const div = document.createElement("li");
+ div.textContent = `${pokemon.name} - ${pokemon.weight}kg - ${pokemon.height}m`;
+ container.appendChild(div);
+ });
+}
+
+// Filtrage
+document.getElementById("all").addEventListener("click", () => displayPokemons(pokemons));
+document.getElementById("weight").addEventListener("click", () => {
+ 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
diff --git a/styles.css b/styles.css
index bcd560616410d5a2afeca1252bbfb66f4f10bb57..35933c7f54961a296dcc6e2760252912b41bacae 100644
--- a/styles.css
+++ b/styles.css
@@ -1,11 +1,20 @@
body {
font-family: Georgia, sans-serif;
+ text-align: center;
}
h1 {
color: darkcyan;
}
+button {
+ text-align: center;
+ background-color: #75a3a3;
+ border-color: #75a3a3;
+ color: white;
+ border-radius: 5px;
+}
+
ul {
list-style-type: none;
padding: 0;