Lab 2: Kanban Board via Chat

Iterative refinement in two stages

← Back to overview

Mode: Chat Duration: approx. 15-20 minutes Shows: iterative refinement, multi-stage execution

This lab runs in two stages: first a working board without drag & drop (move cards via buttons), then we extend it with drag & drop. Everything runs entirely locally with HTML/CSS/vanilla JavaScript — no external libraries.

This lab may feel similar to Lab 1 at first: another chat, another HTML file. That's intentional. The difference is the iterative work in two stages. More importantly, the Kanban board you build here is the foundation for Lab 3, where you create a spec for it. So it's worth finishing the board here properly.

Goal

Build a Kanban/task board and improve it iteratively through follow-up prompts. Participants experience how Kiro builds on an existing result (multi-stage execution) instead of starting over each time.

Preparation

  • Empty folder as a project (in Kiro via Open a project).
  • Kiro in chat mode (default).

Stage 1 – Board WITHOUT drag & drop

Prompt 1

Create a Kanban board as a single HTML file (index.html)
using HTML, CSS and vanilla JavaScript – without external libraries or frameworks.

Requirements:
- Three columns: "To Do", "In Progress", "Done"
- An input field + button to add a new task (lands in "To Do")
- Each card has two arrow buttons (◀ ▶) to move it one column left/right
- Each card has a delete button (✕)
- Arrow buttons are disabled at the edges (◀ in To Do, ▶ in Done)
- Tasks are stored in localStorage and restored on reload
- Clean, modern layout

How to open index.html in the browser: In the Kiro Explorer right-click index.html → Reveal in File Explorer, then double-click in Windows Explorer (address starts with file:///). For this lab incl. localStorage that is entirely sufficient. After changes reload with F5.

Test (Stage 1)

  • Open index.html in the browser.
  • Add two or three tasks.
  • Move cards between columns with ◀ / ▶.
  • Reload the page → tasks are still there (localStorage).
  • Delete a card.

Stage 2 – Add drag & drop

Now we build on the existing board (follow-up prompt in the same chat!).

Prompt 2

Extend the existing Kanban board with drag & drop:
- Cards can be dragged into another column with the mouse
- Use only the native HTML5 drag-and-drop API (draggable, dragstart, dragover, drop)
- No external libraries
- The column highlights visually while a card is dragged over it
- After dropping, the new column is saved in localStorage
- The arrow buttons from stage 1 are also retained

Test (Stage 2)

  • Open index.html again or refresh the page.
  • Drag a card from "To Do" to "Done" with the mouse and drop it.
  • The target column highlights while dragging.
  • Reload the page → the card stays in "Done" (localStorage).
  • Check that the ◀ / ▶ buttons still work.

Optional further iterations (if time permits)

Color the cards differently depending on the column.
Add an optional due date to each card.

Key takeaways

  • Kiro builds on the previous context (stage 2 knows the code from stage 1).
  • Iterative approach: first a simple, working result, then extend deliberately.
  • Complex features (drag & drop) work without frameworks — the platform (browser) provides them.