function render(sorted){ listEl.innerHTML = ''; sorted.forEach((p, i) => { const card = document.createElement('div'); card.className = 'card'; card.setAttribute('role','listitem'); card.innerHTML = ` <div class="rank">#${i+1}</div> <div class="avatar" aria-hidden><img src="${p.avatar}" alt=""></div> <div class="meta"> <div class="name"> <h3 title="${p.name}">${p.name}</h3> <div class="score"> <div class="points">${p.score.toLocaleString()}</div> <div class="trend">${p.lastSeen}</div> </div> </div> <div class="sub"><span><strong>Car:</strong> ${p.car}</span><span><strong>Streak:</strong> ${p.streak} days</span></div> </div> `; listEl.appendChild(card); }); }
/* default sort by score desc */ render(players.slice().sort((a,b)=>b.score-a.score)); drift hunters html code top
<div id="list" class="list" role="list"> <!-- Items injected by JS --> </div> </section> function render(sorted){ listEl
<div class="controls" role="toolbar" aria-label="Leaderboard controls"> <button class="btn active" data-sort="score">Top</button> <button class="btn" data-sort="streak">Streak</button> <button class="btn" data-sort="recent">Recent</button> </div> </div> function render(sorted){ listEl.innerHTML = ''