Project 10: Interactive Web App Dashboard

Project 10: Interactive Web App Dashboard

The capstone: combine HTML with the modern APIs you've learned - web storage, drag and drop, and an SVG shape.

The pieces

1. localStorage to save a checklist: localStorage.setItem("key", value)
2. sessionStorage to keep notes that clear when the tab closes.
3. SVG for a tiny progress ring with <rect> and <circle>.
4. Drag and drop for a simple kanban board with three columns.
5. A <progress> bar for "tasks completed".

Drag and drop bits

<div class="board-column" ondragover="allowDrop(event)" ondrop="dropTask(event)">
  <div class="task-card" draggable="true" ondragstart="startDrag(event)">
    <p>Finish HTML course</p>
  </div>
</div>

An SVG progress ring

<svg width="120" height="120" viewBox="0 0 120 120">
  <circle cx="60" cy="60" r="50" stroke="#1cb0f6" stroke-width="10"
          fill="none" stroke-linecap="round"/>
  <text x="60" y="66" text-anchor="middle" font-weight="bold">60%</text>
</svg>

The checklist app idea

1. User types a task and presses a button.
2. JavaScript saves it with localStorage.setItem(...).
3. When the page reloads, tasks return with localStorage.getItem(...).
4. Drag tasks between a To-Do and a Done column.

Keep the browser happy

• localStorage keeps data after the browser closes; sessionStorage does not.
• ondragstart fires on the source, ondrop on the target.
• An SVG needs a viewBox for it to scale.

TL;DR

Your capstone combines storage, drag and drop, and SVG. Build it, reload it, and watch your own data survive.