✦ StealThis .dev
Pagine Medio

Gym — Workout Tracker

A high-energy active workout tracker for the gym floor — an ordered list of exercises like Back Squat, Bench Press and Deadlift, each with editable weight-by-reps set rows, a one-tap check-off, an add-set button and per-exercise rest. A big neon rest timer counts down with start, pause and reset plus a beep-free flash at zero, while live totals track volume, sets done and elapsed workout time. Finishing surfaces a summary toast. All state in vanilla JS.

Apri in Lab
html css vanilla-js
Target: JS HTML

Codice

Workout Tracker

A dark, athletic logging screen built for tracking lifts mid-session. The header carries a live elapsed clock and three running totals — total volume, sets done versus planned, and exercises completed — that recompute the instant you tap a set done or edit a weight. Below it, a prominent rest timer dominates with a giant neon countdown, quick presets (60s, 90s, 2m, 3m) and start / pause / reset controls; checking off a set auto-starts that exercise’s rest, and at zero the display does a beep-free visual flash while the card frames itself in orange.

Each exercise is its own card — Back Squat, Bench Press, Deadlift, Overhead Press — with realistic seed loads laid out in tidy set rows of weight by reps. Every row has editable number inputs and a round check button that fills neon when done; a card outlines itself once all its sets are logged. “Add set” clones the last row’s load so you can push another working set, and a per-exercise rest chip kicks the timer straight to that lift’s prescribed interval.

Hitting Finish Workout rolls everything into a summary toast — sets logged, total volume, exercises completed and elapsed time. The whole thing is vanilla JS with session-held state, large tap-friendly targets, visible focus rings and a layout that holds together down to ~360px.