Advanced
Paginate a list
Timed build (20 minutes). Show the 23 items 5 per page in <ul id="items">.
Below the list, add a <nav aria-label="Pagination"> with a Prev button (id="prev"), one button per page with className="page" showing its number, and a Next button (id="next"). The current page's button gets aria-current="page". Prev is disabled on page 1 and Next on the last page.
A paragraph id="status" shows Page 1 of 5. Keep only the page number in state; work out everything else during render.
What Check tests
- Page 1 shows Item 1 to Item 5 and
Page 1 of 5 - Prev is disabled on page 1, Next is enabled
- Five page buttons, page 1 marked
aria-current="page" - Next shows Item 6 to Item 10 and
Page 2 of 5 - The last page shows the 3 remaining items and disables Next
- Prev from the last page goes back to Item 16
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.