From 208cbdee1a4d32189cf2135919de0f5fa8b8fad3 Mon Sep 17 00:00:00 2001
From: Safaa Mahdir <safaa.mahdir@imt-atlantique.net>
Date: Wed, 26 Mar 2025 15:35:09 +0100
Subject: [PATCH 1/3] Ajout des trois boutons
---
index.html | 3 +++
1 file changed, 3 insertions(+)
diff --git a/index.html b/index.html
index 078d401..8b7a0f4 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>
--
GitLab
From 06def397e18e9d65110725a7b4e7f9ce12d2243c Mon Sep 17 00:00:00 2001
From: Safaa Mahdir <safaa.mahdir@imt-atlantique.net>
Date: Wed, 26 Mar 2025 15:49:40 +0100
Subject: [PATCH 2/3] feat : ajouter le filtrage
---
script.js | 21 +++++++++++++++++++--
styles.css | 9 +++++++++
2 files changed, 28 insertions(+), 2 deletions(-)
diff --git a/script.js b/script.js
index 7c602e9..44ff9c5 100644
--- a/script.js
+++ b/script.js
@@ -16,6 +16,23 @@ function displayPokemonList() {
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 bcd5606..35933c7 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;
--
GitLab
From d71728dd2b489539e70173f10b8e737598520103 Mon Sep 17 00:00:00 2001
From: Safaa Mahdir <safaa.mahdir@imt-atlantique.net>
Date: Wed, 26 Mar 2025 15:51:22 +0100
Subject: [PATCH 3/3] =?UTF-8?q?mise=20=C3=A0=20jour=20d'affichage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
script.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/script.js b/script.js
index 44ff9c5..a405635 100644
--- a/script.js
+++ b/script.js
@@ -12,7 +12,7 @@ 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);
});
}
--
GitLab