Read here. Code on desktop. The coding workspace opens on screens 1024px and wider.
User interface challenge
Undoable Counter
medium30 min
Build a counter with an ordered value history, undo/redo controls, redo-branch truncation, and reset.
Requirements
Start with value 0, history [0], and the first entry current. Provide −100, −10, −1, +1, +10, and +100 actions.
Every counter action appends one new value, even when that value occurred earlier. Preserve negative values.
Undo moves to the preceding value; Redo moves to the following value. Disable Undo at the first entry and Redo at the last.
If a new counter action occurs after Undo, discard every future entry before appending the new value. Do not append a new entry for Undo or Redo.
Show all remaining history entries in order and mark exactly the current entry with aria-current="step". The history is a display, not a clickable timeline.
Reset clears past and future entries, returning to [0]. A fresh action after reset works normally.
All markup and styles are supplied. Implement handlers and history state; no keyboard shortcuts, persistence, or history limit is required.
Examples
Example 1
Input: +10, +100, Undo, −1
Output: Value is 9, history is [0, 10, 9], and Redo is disabled.
Implement the same visible behavior in each supported framework.
What the tests check
Starts at zero with an empty action history
All six increments and decrements apply
Undo and redo traverse every recorded value
A new action discards the redo branch
Negative and duplicate values remain valid history entries
