thomas

2025-08-28 14:34:18 +02:00
commit 5ff4c53a10
29 changed files with 1705 additions and 0 deletions
--- a/TP3/EX2/thrones.html
+++ b/TP3/EX2/thrones.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <title>Personnages Game of Thrones</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
+    <style>
+        .character-card { text-align: center; }
+        .character-card img { width: 128px; height: 128px; object-fit: cover; border-radius: 50%; }
+    </style>
+</head>
+<body>
+    <div class="container mt-4">
+        <h1 class="title has-text-centered">Personnages Game of Thrones</h1>
+        <div class="field is-grouped is-grouped-centered">
+            <p>Personnages par page:</p>
+            <div class="control">
+                <div class="select">
+                    <select id="pageSizeSelect">
+                        <option value="6">6</option>
+                        <option value="12">12</option>
+                        <option value="24">24</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+        
+        <div id="characters-container" class="columns is-multiline"></div>
+
+        <div class="buttons is-centered">
+            <button id="prevBtn" class="button is-info">Précédent</button>
+            <button id="nextBtn" class="button is-info">Suivant</button>
+        </div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const charactersContainer = document.getElementById('characters-container');
+            const pageSizeSelect = document.getElementById('pageSizeSelect');
+            const prevBtn = document.getElementById('prevBtn');
+            const nextBtn = document.getElementById('nextBtn');
+            let allCharacters = [];
+            let currentPage = 1;
+            let pageSize = parseInt(pageSizeSelect.value);
+
+            const fetchCharacters = async () => {
+                try {
+                    const response = await fetch('https://thronesapi.com/api/v2/Characters');
+                    allCharacters = await response.json();
+                    renderCharacters();
+                } catch (error) {
+                    console.error('Erreur lors de la récupération des personnages:', error);
+                    charactersContainer.innerHTML = '<p class="has-text-danger has-text-centered">Erreur de chargement des données.</p>';
+                }
+            };
+
+            const renderCharacters = () => {
+                charactersContainer.innerHTML = '';
+                const startIndex = (currentPage - 1) * pageSize;
+                const endIndex = startIndex + pageSize;
+                const charactersToDisplay = allCharacters.slice(startIndex, endIndex);
+
+                charactersToDisplay.forEach(char => {
+                    const card = document.createElement('div');
+                    card.classList.add('column', 'is-one-quarter-desktop', 'is-one-third-tablet', 'is-half-mobile');
+                    card.innerHTML = `
+                        <div class="card character-card">
+                            <div class="card-image">
+                                <figure class="image is-128x128 is-inline-block mt-4">
+                                    <img src="${char.imageUrl}" alt="${char.fullName}">
+                                </figure>
+                            </div>
+                            <div class="card-content">
+                                <p class="title is-4">${char.fullName}</p>
+                                <p class="subtitle is-6">${char.title}</p>
+                            </div>
+                        </div>
+                    `;
+                    charactersContainer.appendChild(card);
+                });
+
+                updatePaginationButtons();
+            };
+
+            const updatePaginationButtons = () => {
+                prevBtn.disabled = currentPage === 1;
+                nextBtn.disabled = currentPage * pageSize >= allCharacters.length;
+            };
+
+            prevBtn.addEventListener('click', () => {
+                if (currentPage > 1) {
+                    currentPage--;
+                    renderCharacters();
+                }
+            });
+
+            nextBtn.addEventListener('click', () => {
+                if (currentPage * pageSize < allCharacters.length) {
+                    currentPage++;
+                    renderCharacters();
+                }
+            });
+
+            pageSizeSelect.addEventListener('change', () => {
+                pageSize = parseInt(pageSizeSelect.value);
+                currentPage = 1;
+                renderCharacters();
+            });
+
+            fetchCharacters();
+        });
+    </script>
+</body>
+</html>