# Focus Desk

A polished, responsive task management web app built with vanilla HTML, CSS, and JavaScript.

## Features

- **Create tasks** with title, optional notes, priority (low/medium/high), and optional due date
- **Edit and delete** tasks instantly
- **Toggle completion** state reversibly
- **Search** tasks by title and notes (case-insensitive)
- **Filter by status** (all, active, completed) and priority (all, low, medium, high)
- **Persistent storage** using localStorage across browser reloads
- **Task counts** showing total, active, and completed
- **Responsive design** works beautifully at 390px and 1440px widths
- **Accessible interface** with keyboard focus, semantic HTML, and ARIA labels

## Running Locally

1. Navigate to this project directory
2. Start a local HTTP server:
   ```bash
   python3 -m http.server
   ```
3. Open your browser and visit: `http://localhost:8000`

## Manual Verification Checklist

### Task Management
- [ ] Enter a title and click "Add Task" — task appears in list
- [ ] Create multiple tasks with different priorities and notes
- [ ] Click the checkbox to complete/uncomplete a task — state persists on reload
- [ ] Click "Edit" to modify title, notes, priority, or due date
- [ ] Click "Delete" to remove a task
- [ ] Verify task counts update (Total, Active, Done)

### Search & Filters
- [ ] Type in the search box — tasks filter by title and notes (case-insensitive)
- [ ] Use the "Status" filter to show All, Active, or Completed tasks
- [ ] Use the "Priority" filter to show All or specific priority levels
- [ ] Combine search + filters — they work together
- [ ] See the empty state message when no tasks match

### Persistence
- [ ] Create tasks and reload the page — all tasks persist
- [ ] Edit a task, reload the page — changes persist
- [ ] Complete a task, reload the page — completion state persists
- [ ] Delete a task, reload the page — deletion persists

### Design & Accessibility
- [ ] Resize browser to 390px (mobile) and 1440px (desktop) — layout adapts smoothly
- [ ] No horizontal scrolling at any viewport size
- [ ] Tab through the form — focus indicators are visible
- [ ] All interactive elements have clear labels
- [ ] Light theme with indigo accents used consistently

### Edge Cases
- [ ] Try creating a task with only whitespace — rejected, form stays open
- [ ] Try leaving title blank and submitting — form validation prevents submission
- [ ] Create a task, reload, then search for it — search works
- [ ] Complete a task, search, filter by "Active" — task is hidden as expected
- [ ] Filter by priority and status simultaneously — both filters apply

## Technical Details

- **Storage**: All data saved to `localStorage` under key `focusdeskTasks`
- **HTML Validation**: Data-testid attributes on all required elements for verification
- **Security**: Task text rendered safely (no HTML injection)
- **Performance**: No external dependencies, lightweight and instant
- **Responsive**: Mobile-first CSS with breakpoints at 390px and 480px