Kanban Board
Build a kanban board with three columns — To do, In progress, Done — from the data in the starter. Cards can be added to a column and moved between columns.
Requirements
- Each column shows its title, its card count, and its cards in order.
- A form at the bottom of each column adds a card with the typed title; blank titles are ignored and the input clears after adding.
- Every card has left and right buttons that move it to the neighbouring column (disabled at the edges), so the board works without a mouse.
- Cards can also be dragged: dropping on a column appends the card; dropping on another card inserts before it. Dropping on a card in the same column reorders.
- All updates are immutable: replace the column and card arrays, never mutate them.
- The buttons carry
aria-labels naming the card and direction; the column headings label their sections.
Hints
Hint 1
Write one pure moveCard(columns, cardId, toColumnId, beforeCardId) that filters the card out of every column and inserts it at the right index of the target; both the buttons and the drop handler call it.
Hint 2
HTML5 drag and drop needs draggable, onDragStart storing the card id in dataTransfer, onDragOver calling preventDefault() (otherwise drop never fires), and onDrop on both cards and columns — stop propagation on the card so the column handler does not also run.
Hint 3
Keep the per-column draft text in one object keyed by column id so the inputs stay controlled without a component per column.