Deviopath › React

Kanban Board

Hard · Lists

Build a kanban board with three columns: "To Do", "Doing" and "Done".

Each column is a <section className="column"> with an <h2> showing the name and the number of cards, e.g. "To Do (2)", and a <ul> of cards. Each card is <li className="card"> with the title in a <span>, a "Move left" button (not in the first column) and a "Move right" button (not in the last column).

Initial cards: "Write spec" and "Design UI" in To Do, "Build API" in Doing.

- Moving a card puts it at the END of the target column.

- Above the board there is an <input placeholder="New card"> and an "Add card" button that adds a card to the end of To Do and clears the input. Empty text (or only spaces) is ignored.

Next: Quiz App