62 lines
2.5 KiB
HTML
62 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Les Simpson</title>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>Membres des familles Simpson</h1>
|
|
<div id="characters-container"></div>
|
|
|
|
<script>
|
|
let characters = [
|
|
{"id":"1","nom":"Simpson","prenom":"Homer","age":"38"},
|
|
{"id":"2","nom":"Simpson","prenom":"Marge","age":"34"},
|
|
{"id":"3","nom":"Simpson","prenom":"Bart","age":"10"},
|
|
{"id":"4","nom":"Simpson","prenom":"Lisa","age":"8"},
|
|
{"id":"5","nom":"Simpson","prenom":"Maggie","age":"1"},
|
|
{"id":"6","nom":"Flanders","prenom":"Ned","age":"60"},
|
|
{"id":"7","nom":"Flanders","prenom":"Todd","age":"8"},
|
|
{"id":"8","nom":"Flanders","prenom":"Rod","age":"10"},
|
|
{"id":"9","nom":"Van Houten","prenom":"Kirk","age":null},
|
|
{"id":"10","nom":"Van Houten","prenom":"Milhouse","age":null},
|
|
{"id":"11","nom":"Van Houten","prenom":"Luann","age":null},
|
|
{"id":"12","nom":"Muntz","prenom":"Nelson","age":null},
|
|
{"id":"13","nom":"Muntz","prenom":"Véronica","age":null},
|
|
{"id":"14","nom":"Muntz","prenom":"Thomas Jr","age":null},
|
|
{"id":"15","nom":"Lovejoy","prenom":"Timothy","age":null},
|
|
{"id":"16","nom":"Burns","prenom":"Charles","age":null}
|
|
];
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const container = document.getElementById('characters-container');
|
|
const families = {};
|
|
|
|
// Regrouper les personnages par nom de famille
|
|
characters.forEach(char => {
|
|
if (!families[char.nom]) {
|
|
families[char.nom] = [];
|
|
}
|
|
families[char.nom].push(char);
|
|
});
|
|
|
|
// Créer et ajouter les éléments HTML
|
|
for (const family in families) {
|
|
const familyTitle = document.createElement('h2');
|
|
familyTitle.textContent = family;
|
|
container.appendChild(familyTitle);
|
|
|
|
const familyList = document.createElement('ul');
|
|
families[family].forEach(char => {
|
|
const memberItem = document.createElement('li');
|
|
const age = char.age !== null ? `(${char.age} ans)` : '';
|
|
memberItem.textContent = `${char.prenom} ${age}`;
|
|
familyList.appendChild(memberItem);
|
|
});
|
|
container.appendChild(familyList);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |