CodeAgeBy Sitezack
Modernes JavaScript für ProfisES6+ und Asynchronität0 XP
Kapitel-Fortschritt0/6

Lektion 6 von 6

Projekt: das Dashboard

Das Muster jeder modernen App: asynchrone Daten laden, aggregieren, dann die Oberfläche rendern — genau das macht ein Dashboard.

fetchStats() simuliert die API. Ihre KPIs: Summe mit reduce, bestes Element per Vergleich, Liste gerendert mit createElement oder insertAdjacentHTML.

async function load() {
  const stats = await fetchStats();
  const total = stats.visits.reduce((a, v) => a + v, 0);
}

🎯 Aufgabe

Mit den Daten von fetchStats() (vorgegeben): 1) Schreiben Sie in #kpi-visits die Summe der Besuche (760, via reduce); 2) schreiben Sie in #kpi-top den Namen des Users mit dem besten xp (Pixel); 3) fügen Sie in die Liste #users ein <li> pro User mit Name und xp ein. Alles in einer async-Funktion, die beim Laden aufgerufen wird.

PRO-Lektion

Dieses fortgeschrittene Kapitel gehört zu CodeAge PRO. Schalte es frei, um dein Abenteuer fortzusetzen.

PRO entdecken