Lesson 6 of 6
Project: the dashboard
The pattern of every modern app: load async data, aggregate it, then render the interface — exactly what a dashboard does.
fetchStats() simulates the API. Your KPIs: total with reduce, best item with a comparison, list rendered with createElement or insertAdjacentHTML.
async function load() {
const stats = await fetchStats();
const total = stats.visits.reduce((a, v) => a + v, 0);
}🎯 Exercise
With the data from fetchStats() (provided): 1) write into #kpi-visits the sum of visits (760, via reduce); 2) write into #kpi-top the name of the user with the best xp (Pixel); 3) append into the #users list one <li> per user holding their name and xp. All inside an async function called on load.
PRO lesson
This advanced chapter is part of CodeAge PRO. Unlock it to keep your adventure going.
Discover PRO →