Drag cards between columns · Double-click to edit · Click × to delete
Backlog
0
In Progress
0
Review
0
Done
0
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 gradient headers and card counts
- **Drag & drop**: Cards can be dragged between columns with visual feedback (highlighted drop zones, rotation effect on dragged cards)
- **Inline editing**: Double-click any card to edit it in place; press Enter to save, Escape to cancel
- **Custom delete modal**: Replaces `window.alert`/`window.prompt` with a styled confirmation dialog
- **localStorage persistence**: Uses the namespace `kanban-board-app-state-v1` — state survives page reloads
- **Confetti animation**: A canvas-based confetti burst fires when a card is dropped into the "Done" column, plus a green pulse on the done column
- **Dummy data**: On first load (empty state), 7 sample cards are auto-generated across columns
- **Modern design**: Dark gradient background, glassmorphism cards, color-coded left borders, smooth transitions, custom scrollbar
### Test Selectors (all present and exact)
| Selector | Purpose |
|---|---|
| `data-testid="column-backlog"` | Backlog column container |
| `data-testid="column-in-progress"` | In Progress column container |
| `data-testid="column-review"` | Review column container |
| `data-testid="column-done"` | Done column container |
| `data-testid="add-card"` | Add card button (×4, one per column) |
| `data-testid="card"` | Every card element |
| `data-testid="delete-card"` | Delete button inside each card |
| `data-testid="confirm-delete"` | Confirm button in the delete modal |
| `data-testid="card-input"` | Input/textarea for adding or editing cards |