114 lines
4.5 KiB
HTML
114 lines
4.5 KiB
HTML
<!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> |