Product definition
Scoped the one-day build around one debugging task: reveal the state transitions behind an interactive form.
Open Source / Form Validation / Daily Build
Form State Debugger
/ Overview
A dependency-free browser tool that makes touched, dirty, pristine, valid and invalid form states visible while you interact.
Form bugs are harder to diagnose when current values, interaction history and validation results remain hidden inside event handlers.
/ Provided servicesClear thinking.
Clear thinking.
Practical delivery.
Interface design
Paired a sample form with responsive live inspector cards and accessible status announcements.
Engineering
Separated immutable state creation, updates, validation, submission and reset behavior into testable JavaScript functions.
/ Solution
I built a local browser tool that exposes each field's value, touched and dirty flags, validation result and latest event while a user types, blurs, resets or submits a sample form.
/ Impact
Visible field-state transitions
Immutable state updates
Local-only sample data
Seven passing state tests
JavaScript modules
Pure functions model field values, touched and dirty flags, errors, submit counts and event transitions.
HTML & CSS
Semantic inputs, keyboard focus, live status feedback and responsive neo-brutalist state cards without runtime dependencies.
Node test runner
Seven tests cover pristine state, immutable updates, blur, validation, valid and blocked submits, and reset behavior.