Add a Task
Press Enter or click Add. Max 80 characters.
0/80
Tasks
-
No tasks yet. Add one above.
How It Works
Each interaction demonstrates the IPO loop.
-
A requirement from the environment — a user click, keypress, or system trigger. The browser's event system detects the stimulus and fires the registered listener.
-
The function evaluates current state, applies business logic, and calculates the next step. State is maintained via
constandlet— nevervar. -
A visible change dynamically updates the DOM. Text uses
textContentfor XSS safety. New nodes usedocument.createElement(). Visual state usesclassList.toggle(). -
js-prefixed classes are strictly JavaScript hooks — never styled.is-prefixed classes define visual state — toggled by JS, animated by CSS. Clean separation of concerns.
Focus Counter
Track your deep work sessions.