CodeAgeBy Sitezack
JavaScript moderne pour ProsES6+ et asynchrone0 XP
Progression du chapitre0/6

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