Task
System.

Every interaction follows the IPO loop — Input, Process, Output. Click anything. Watch the system respond.

Add a Task

Task description

Press Enter or click Add. Max 80 characters.

0/80

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 const and let — never var.
: A visible change dynamically updates the DOM. Text uses textContent for XSS safety. New nodes use document.createElement(). Visual state uses classList.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.

Track your deep work sessions.