Once the AI has confirmed the structure, use these four prompts in order. Run the code after each one before moving to the next. If something breaks, paste the error back before continuing.
Iteration 1 — Core Structure
Build the HTML/CSS/JS for a basic expense tracker with:
- An "Add Expense" form: amount (number), category (dropdown with Food, Transport, Entertainment, Bills, Other), and an optional note field
- A list showing all expenses with their category and amount
- localStorage to save and load expenses automatically
Use clean, minimal styling — no frameworks. Cream background, dark text.
Iteration 2 — Category Totals
Add a totals section above the expense list that shows:
- Total spent per category (only show categories that have entries)
- Overall monthly total
- Make these update automatically when an expense is added or deleted
Iteration 3 — Delete + Polish
Add a delete button to each expense item. When clicked, show a brief "Are you sure?" confirmation before removing. Also add a "Clear all" button at the bottom that requires a confirm dialog. Keep the styling consistent with what we have.
Iteration 4 — Edge Cases
Handle these edge cases:
1. Prevent submitting the form with an empty amount or £0
2. Show a friendly message when there are no expenses yet ("No expenses yet — add your first above")
3. Format all amounts as £X.XX consistently
4. Make sure the page works on mobile (test the layout at 375px width)