← Business 📦

Order Status Tracker

A satisfying visual progress stepper for tracking mock orders from Placed to Delivered.

🟢 EasyDifficulty

2 hoursTime

Python, JavaScript, TypeScriptLanguages

What you're building

You're building the little visual progress tracker every package-delivery email has -- a horizontal stepper showing Placed, Processing, Shipped, Out for Delivery, and Delivered, with the current stage highlighted. You'll simulate multiple orders, each remembering its own status in localStorage, and add a button that advances an order to its next stage, exactly like a warehouse system would.

What you'll unlock 🔓

State machinesCSS stepper UIlocalStorage

You'll need

Basic JavaScript
Basic CSS
A browser

🗺️ Build roadmap

01 Build the order list and create-order form → 02 Define the ordered list of possible statuses → 03 Build the visual stepper component → 04 Wire up an 'advance status' button per order → 05 Persist orders and their statuses to localStorage → 06 Add status-based styling (colors per stage) → 07 Add an estimated delivery date calculation

🔒

Log in to start building

Your first project is free -- create an account to unlock it.