実践：小さな Web サイトを作る

# Small Steps website brief
Build a local todo website using HTML, CSS and JavaScript only.

## Files
- index.html: accessible page and form
- style.css: responsive layout
- core.mjs: immutable data functions
- app.js: DOM events and localStorage
- core.test.mjs: Node built-in tests

## Data contract
- Task: {id: string, title: string, completed: boolean}
- Trim titles; accept 1 to 100 non-blank characters. IDs must be unique.
- Export addTask(tasks, title, id), toggleTask(tasks, id), removeTask(tasks, id),
  visibleTasks(tasks, filter), decodeTasks(raw), encodeTasks(tasks).
- Filters: all, active, completed. Missing toggle/delete IDs leave data unchanged.
- Store {version: 1, tasks: [...]} under mokaair-codex-todo-v1.
- Invalid stored data must remain untouched; warn and allow temporary work.

## Interface and acceptance
- Labels: New task, Add task, Show, All tasks, Active, Completed, Delete.
- Show active and total counts, including when a filter is selected.
- Add, toggle, delete, filter and reload must work.
- Render task text as text, not HTML.
- Visible keyboard focus; preserve sensible focus after list updates.
- Fit 360px, 390px and 1280px viewports without page overflow.
- Include an About this exercise disclosure with a Reset practice data button.
- Reset practice data removes only this app's storage key.
- No dependencies, account, backend, analytics or external requests.

## Delivery
Explain changes, run node --test core.test.mjs, and list actual browser checks.
Do not claim checks that were not run. Do not publish or deploy.

Implement core.mjs and core.test.mjs from the approved brief.md contract.
Keep all data operations immutable. Test empty and long titles, Unicode,
duplicate IDs, filters, missing IDs, storage round trips and invalid storage.
Run node --test core.test.mjs and report the command, result and remaining work.
Do not change the brief, publish anything or build the UI in this stage.

Implement index.html, style.css and app.js using the tested core.mjs.
Follow the UI, storage, accessibility and responsive criteria in brief.md.
Do not weaken the data tests to accommodate UI bugs.
Run the data tests again. Give local preview instructions and list which
browser interactions you actually verified and which still need verification.

node --test core.test.mjs
py -3 -m http.server 4173 --bind 127.0.0.1

node --test core.test.mjs
python3 -m http.server 4173 --bind 127.0.0.1

<img src=x>

# Website handoff
Root / source version:
Node test command / exit status:
Browser / version / viewport / date:

| Step | Expected active / total | Observed |
| --- | --- | --- |
| Reset fictional practice data; select All tasks | 0 / 0 | |
| Add Read, then Build | 2 / 2 | |
| Complete Read | 1 / 2 | |
| Select Active; only Build visible | 1 / 2 | |
| Select Completed; only Read visible | 1 / 2 | |
| Select All tasks, delete Read | 1 / 1 | |

Input/storage recovery evidence:
Keyboard and narrow-layout evidence:
Actual changed files:
Unverified requirements:
How to restart / restore: