team_dictionnaire + Match api

2025-12-27 23:23:24 +00:00 · 2023-11-16 15:46:59 +01:00
parent c7601238ec
commit a9ba00cdc5
3 changed files with 133 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Liste d'Équipes</title>
+    <!-- Bootstrap CSS (via CDN) -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
+</head>
+<body>
+    <div class="container mt-5">
+        <h1 class="text-center mb-4">Liste d'Équipes</h1>
+        <input type="text" id="searchInput" class="form-control mb-4" placeholder="Rechercher une équipe..." oninput="filterTeams()">
+        <ul id="teamList" class="list-group"></ul>
+    </div>
+
+    <!-- Bootstrap JS, Popper.js, and jQuery (via CDN) -->
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
+
+    <script>
+        // Liste d'équipes (exemple)
+        const teams = [
+            "Équipe 1",
+            "Équipe 2",
+            "Équipe 3",
+            "Équipe 4",
+            "Équipe 5",
+            "Équipe 6",
+            "Équipe 7",
+            "Équipe 8",
+            "Équipe 9",
+            "Équipe 10"
+            // Ajoutez plus d'équipes au besoin
+        ];
+
+        // Fonction pour afficher les équipes dans la liste
+        function displayTeams(filteredTeams) {
+            const teamList = document.getElementById("teamList");
+            teamList.innerHTML = "";
+
+            for (let i = 0; i < filteredTeams.length; i++) {
+                const teamItem = document.createElement("li");
+                teamItem.className = "list-group-item";
+                teamItem.textContent = filteredTeams[i];
+                teamItem.onclick = function () {
+                    alert("Vous avez cliqué sur " + filteredTeams[i]);
+                };
+
+                teamList.appendChild(teamItem);
+            }
+        }
+
+        // Affiche les cinq premières équipes par défaut
+        displayTeams(teams.slice(0, 5));
+
+        // Fonction pour filtrer les équipes en fonction de la recherche
+        function filterTeams() {
+            const searchInput = document.getElementById("searchInput");
+            const searchTerm = searchInput.value.toLowerCase();
+
+            const filteredTeams = teams.filter(team => team.toLowerCase().includes(searchTerm));
+
+            // Affiche les équipes filtrées
+            displayTeams(filteredTeams);
+        }
+    </script>
+</body>
+</html>