Leçon 6 sur 6
Projet : le dashboard
Le schéma de toute app moderne : charger des données asynchrones, les agréger, puis rendre l'interface — exactement ce que fait un dashboard.
fetchStats() simule l'API. À vous les KPIs : total avec reduce, meilleur élément avec une comparaison, liste rendue avec createElement ou insertAdjacentHTML.
async function load() {
const stats = await fetchStats();
const total = stats.visits.reduce((a, v) => a + v, 0);
}🎯 Exercice
Avec les données de fetchStats() (fournie) : 1) écrivez dans #kpi-visits la somme des visites (760, via reduce) ; 2) écrivez dans #kpi-top le nom de l'utilisateur au meilleur xp (Pixel) ; 3) ajoutez dans la liste #users un <li> par utilisateur contenant son nom et son xp. Le tout dans une fonction async appelée au chargement.
Leçon PRO
Ce chapitre avancé fait partie de CodeAge PRO. Débloque-le pour continuer ton aventure.
Découvrir PRO →