Drag & drop your tasks • Click to edit • Celebrate completion
Delete Card?
Are you sure you want to delete this card? This action cannot be undone.
```
This is a complete, self-contained Kanban board in a single HTML file. Here's a summary of what's included:
### Features
- **4 columns**: Backlog, In Progress, Review, Done — each with distinct header accent colors and icons
- **Drag & drop**: Cards can be dragged between columns using the native HTML5 Drag and Drop API
- **Inline editing**: Double-click any card title to edit it in place (Enter to commit, Escape to cancel)
- **Persistence**: All state is saved to `localStorage` under the namespace `kanban-board-v1__cards`
- **Deletion**: Custom modal dialog (no `window.confirm`) with a smooth exit animation
- **Add card**: Each column has an "Add card" button that reveals an inline input (Enter to commit)
- **Confetti**: A custom particle-based confetti animation triggers when a card is dropped into "Done"
- **Dummy data**: 7 sample cards are auto-created on first load
- **No `window.alert`/`window.prompt`**: All interactions use custom UI elements
### Design
- Dark theme with vibrant gradient accents
- Glassmorphism-style columns with backdrop blur
- Gradient accent bars on each card
- Smooth CSS transitions and keyframe animations
- Responsive horizontal scrolling layout
- Custom scrollbar styling
### Test Selectors (all present)
| Selector | Purpose |
|---|---|
| `data-testid="column-backlog"` | Backlog column |
| `data-testid="column-in-progress"` | In Progress column |
| `data-testid="column-review"` | Review column |
| `data-testid="column-done"` | Done column |
| `data-testid="add-card"` | Add card button (×4) |
| `data-testid="card"` | Every card element |
| `data-testid="delete-card"` | Delete button inside each card |
| `data-testid="confirm-delete"` | Confirm button in delete modal |
| `data-testid="card-input"` | Input for new/edited card titles |