Project · Frontend Web Development
Project: Kharcha, a monthly expense tracker
The brief
Build Kharcha, a small web app to track monthly spending: a responsive two-column layout, safe parsing of amounts like "1,250.50", a list drawn from data, a form that adds expenses, a category filter with totals, and saving to the browser with JSON.
Why it matters
This is the core of every dashboard, admin panel and fintech screen: data in an array, a function that draws it, events that change it, and storage that keeps it. Interviewers for front-end roles often ask for exactly this "todo/expense app" in a machine-coding round.
Skills you practise
- CSS grid, flexbox and media queries
- parsing and validating input
- creating elements and textContent
- submit and change events
- filter and reduce
- JSON and localStorage
- passing dependencies in to make code testable
What you will have at the end
Kharcha: index.html, styles.css and app.js, a working expense tracker you can deploy and show in a machine-coding interview.
How it is marked (rubric, 100 points)
| Works correctlyEvery check passes; adding, filtering, totals and reloading all work in a real browser. | 40 |
|---|---|
| Safe with user inputAmounts are validated, errors are shown, textContent is used for user text, JSON parsing cannot crash the page. | 20 |
| Clean structureData functions are separate from DOM code, every change goes through refresh(), no repeated code. | 25 |
| Responsive and accessibleOne column on a phone, two on a laptop; labels on every field, the error is announced. | 15 |
0/6 steps done
Step 1 of 6
A responsive layout
.app is a grid with one column, a gap and a max-width; from 768px wide (@media (min-width: 768px)) it has two columns; .summary is a flex row with space-between.
Design for the phone first: one column. Then a media query adds a second column when there is room. Grid is for the page layout in two dimensions; flexbox is for a row of things, like the total and the filter in .summary. gap spaces items without margins on every child.
Run shows what your code prints. Check runs the step's tests. Ctrl+Enter checks too.