What you will use in this project
- Objects and properties
- Arrays: push, length, forEach
- Date handling
- For loops and accumulators
Web Project: JavaScript Data Toolkit
Complete each step in the editor and watch the result as your page takes shape.
Build JavaScript Data Toolkit, step-by-step
Build a tiny expense tracker in the browser.
Filter, sum, and report on an array of expenses.
How it works
- 1 Follow the steps on the left. Each dot in the stepper bar is one focused chunk of work. Read the instructions, the “What to do” checklist, and any hints.
- 2 Write your code on the right. The editor is yours. Files auto-save as you type. Use the Preview tab to see your work in action.
-
3
Click
Check codewhen you’re ready. We grade your work against the step’s rubric and tell you exactly what passed and what still needs work. - 4 Pass a step to move on. Build the project cumulatively. Pass every step to complete it and earn the full XP.
How it’s graded
This project is broken into 7 steps. Each one has its own pass criterion. Click Check code on every step to verify your progress and earn the full +130 XP.
| # | Step & pass criterion | Weight |
|---|---|---|
| 1 | Parse the raw expenses parseExpenses converts date strings to Date objects | 12 pts |
| 2 | Filter expenses by category filterByCategory matches exactly; "all" passes through | 12 pts |
| 3 | Sum the expense amounts total sums amounts; empty array returns 0 | 14 pts |
| 4 | Find the top-spending category topCategory returns the category with the biggest total | 15 pts |
| 5 | Find the most recent expense latestExpense returns the most recent expense object | 15 pts |
| 6 | Total spending by month monthlyTotals returns YYYY-MM totals per month | 16 pts |
| 7 | summary and render summary composes helpers and renders into the page | 16 pts |
