# Focus Desk

A small, responsive task management app built with vanilla HTML, CSS, and
JavaScript. No frameworks, no external dependencies, no network calls. All data
is stored in the browser via `localStorage`.

## Running

From this directory:

```
python3 -m http.server 8000
```

Then open <http://localhost:8000> in a browser. Stop the server with `Ctrl+C`
when done. (Any static file server works; the app does not require a server to
function, but one is needed for the verification steps below.)

## Features

- Create tasks with a required title, optional notes, priority (low/medium/
  high), and optional due date.
- Edit any field of an existing task (title, notes, priority, due date).
- Delete tasks and toggle complete/incomplete (reversible).
- Search titles and notes case-insensitively; combine with status
  (all/active/completed) and priority filters.
- Counts for total / active / completed tasks.
- All state persists in `localStorage` across reloads. Invalid saved JSON is
  ignored gracefully (the app starts empty). The app never reseeds demo tasks.
- Light theme with a restrained indigo accent, visible keyboard focus, semantic
  labels, and a responsive layout that works at 390px and 1440px with no
  horizontal overflow. Task text is rendered as text content (no HTML
  injection).

## Manual verification

1. Start the server as above and open the page.
2. Add a task with only a title: it appears in the list and the Total/Active
   counts increase to `1`.
3. Add a second task with notes, a high priority, and a due date. Confirm the
   priority tag, notes, and due date render.
4. Toggle a task's checkbox: it strikes through, the Active count drops, and
   Completed count rises. Toggle again to revert.
5. Edit a task: change its title, notes, priority, and due date, then Save.
   Confirm the changes persist.
6. Delete a task: it is removed and counts update.
7. Type into Search: results filter by title and notes (case-insensitive).
8. Set Status filter to Active, then Completed, then All; combine with a
   Priority filter and a search term; confirm results match all criteria.
9. With no matching tasks, confirm the empty-state message is shown.
10. Reload the page: tasks and their state persist.
11. In DevTools, run
    `localStorage.setItem('focus-desk-tasks-v1','{bad json');` then reload. The
    app should load to an empty state without errors.
12. Resize the window to 390px and 1440px: layout stays usable with no
    horizontal scrollbar.
13. Tab through the form and controls: every focusable element shows a clear
    focus ring.

## Files

- `index.html` — markup and structure.
- `style.css` — styling and responsive layout.
- `app.js` — application logic and localStorage persistence.
- `README.md` — this file.