Reading List Board

DOM AppsIntermediate

Build a filterable reading-list interface that keeps summary text, visible cards, and status changes aligned.

This Challenge

Challenge brief

A learner dashboard needs a compact reading-list board that can filter unread or completed items without drifting out of sync with the visible cards.

Target outcome

Ship a small DOM-style board model that returns a stable summary, a filtered title list, and a preview-ready markup string.

Deliverables

Create the summary text from the full reading list.

Filter visible books by all, unread, or completed status.

Generate markup that highlights completed items.

Return one consistent snapshot object for the UI layer.

Acceptance checklist

The summary text updates correctly for the current list.

Unread and completed filters produce the right visible titles.

Completed books are tagged in the generated markup.

The returned object is stable enough for a view renderer to consume directly.

Project Workspace

Build the challenge in one focused editor

Use the starter code, run the checks, and compare your structure with the solution notes only after you have attempted the project yourself.

DOM Apps40 minIntermediate

Project editor

Build the challenge in JavaScript or TypeScript, then run the current workspace checks against the compiled output.

31 lines

JavaScript mode runs directly in the current project runner.

Workspace checks

All books view

Check

The full board should show every title and the correct summary.

Input: ["all"]

Expected: {"filter":"all","summary":"3 books · 2 unread · 1 completed","visibleTitles":["Eloquent JavaScript","You Don't Know JS Yet","JavaScript: The Good Parts"],"cardsMarkup":"<article data-status=\"unread\">Eloquent JavaScript<span>Unread</span></article><article data-status=\"completed\">You Don't Know JS Yet<span>Completed</span></article><article data-status=\"unread\">JavaScript: The Good Parts<span>Unread</span></article>"}

Unread filter

Check

Unread filter should remove completed items while keeping the same summary.

Input: ["unread"]

Expected: {"filter":"unread","summary":"3 books · 2 unread · 1 completed","visibleTitles":["Eloquent JavaScript","JavaScript: The Good Parts"],"cardsMarkup":"<article data-status=\"unread\">Eloquent JavaScript<span>Unread</span></article><article data-status=\"unread\">JavaScript: The Good Parts<span>Unread</span></article>"}

Run output

Run the project to inspect automatic checks and console output.

Project review

Inspect the project solution like a senior reviewer would, with correctness, structure, and maintainability feedback.

Run the review after or before the code runner. If test results are available, the review will factor them into the feedback as well.