Simple Form

SketchSystems.spec

Simple Form
  Inactive*
    focus field -> Field Active
  Field Active
    enter text -> Fields Filled
  Fields Filled
    submit -> Valid?
  Valid?
    yes -> Submit?
    no -> Field Error
  Field Error
    enter text -> Fields Filled
  Submit?
    success -> Success
    error -> Error
  Error
    enter text -> Fields Filled
    clear text -> Field Active
  Success
    
    

SketchSystems_prototype.js

function render(model){
  let current_state_name = model.active_states[0].name;
  return $("h1",
           {style: {color: "darkBlue"}},
           `The current state is: ${current_state_name}`);
}