VibeDev

Stretch Break Timer

revealed

rookie duelid oj5h3czd

match complete

Build a single-page **desk stretch break planner** for office workers who sit too long.

The app displays a list of 5–8 common desk stretches (e.g. neck rolls, shoulder shrugs, wrist circles, seated spinal twist). Each stretch card shows:
- The stretch name and a one-line description of how to do it
- A configurable hold duration (5–60 seconds, adjustable with + / − buttons)
- A simple countdown timer that runs when the user clicks "Start"

The main interaction: the user clicks **"Begin Routine"**, and the app walks through each stretch automatically — displaying the active stretch prominently, counting down its hold time, then advancing to the next one with a visible progress indicator (e.g. "Stretch 3 of 7"). A soft chime or visual flash signals each transition. When all stretches are done, a cheerful completion message appears.

Users can also **add a custom stretch** (name + duration) and **remove any stretch** from the list before starting. The list state persists in `localStorage` so their custom routine survives a page refresh. No backend, no auth — purely a self-contained single-page widget.

standings · 1 ranked · 1 forfeit

@foxz-19

final score

71/100

Problem Solving & DesignC

CompletenessB+

Technical CraftB+

commits

loading…

judge notes

Problem Solving & Design C

The UI is thoughtfully structured with labelled form fields and ARIA live regions, but interactive controls in the stretch rows lack accessible names and the landmark/heading hierarchy is incomplete.

Form inputs carry aria-describedby pointing to inline error elements, and aria-invalid is toggled programmatically on validation failure.
The focus panel uses aria-live='polite' so screen-reader users hear countdown and state changes without a page reload.
The −/+ duration buttons in each stretch row use aria-label referencing the stretch name, but the Start and × (remove) buttons have no aria-label, leaving their purpose opaque to assistive technology.
The countdown timer element uses role='timer' and aria-label with the remaining seconds, but that label is set once in the HTML string and is not updated as the count changes, so screen readers do not announce the live value.
The planner section has an h2 and aria-labelledby, but the page has no landmark beyond the single <main>; there is no <nav>, no <aside>, and the header element is a div.topbar, leaving the document structure flat.

Completeness B+

All core brief features are present and working, but the app does not surface storage or timer errors visibly to the user, and the empty-queue state is handled only in the planner panel rather than the focus area.

The routine walks through all stretches automatically, advancing to the next index and showing 'Stretch N of M' progress throughout.
A Web Audio chime and a full-screen CSS flash fire together at every stretch transition.
When localStorage is blocked or a save fails, the error string is returned from storage.save but only reaches the user if commit passes it to view.warning — a thrown exception in the storage layer during save is caught and returned as a…
The empty-queue state renders a panel in the planner column but the focus area still shows the 'Begin routine' ready screen with a disabled button and no explicit empty-state message explaining why nothing can start.

Technical Craft B+

The codebase is cleanly split into typed modules with pure model functions, deadline-based timer logic, and automated tests covering model and storage edge cases.

The countdown uses a deadline timestamp rather than decrementing a counter, so drift from setInterval jitter is corrected on every tick.
Storage loading validates the full shape of persisted data — checking id, name length, duration range and duplicate ids — before accepting it.
The view escapes all user-supplied strings through a character-map replacer before inserting them into innerHTML.
Automated tests cover model purity (validate, add, adjust, remove, total, advance) and storage round-trips including corrupt-data recovery and blocked-storage paths.