Merge branch 'tache1' into 'main'

feat: affichage d'une liste statique de 5 Pokémon Closes #1 See merge request !1

Merge branch 'tache1' into 'main'
c55ae7a2 · MAHDIR Safaa · 824cd134 · c222495f · c55ae7a2 · c55ae7a2
Commit c55ae7a2 authored 2 months ago by MAHDIR Safaa
--- a/index.html
+++ b/index.html
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pokémon Filter</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <h1>Liste de Pokémon</h1>
+    <ul id="pokemon-list"></ul>
+    <script src="script.js"></script>
+</body>
+</html>
\ No newline at end of file
--- a/script.js
+++ b/script.js
+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} - Poids: ${pokemon.weight} kg - Taille: ${pokemon.height} m`;
+        listElement.appendChild(listItem);
+    });
+}
+
+// Afficher la liste au chargement de la page
+document.addEventListener("DOMContentLoaded", displayPokemonList);
--- a/styles.css
+++ b/styles.css
+body {
+    font-family: Georgia, sans-serif;
+}
+
+h1 {
+    color: darkcyan;
+}
+
+ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+li {
+    margin: 10px;
+    padding: 10px;
+    border-radius: 5px;
+}
\ No newline at end of file