A Simple Budget Tracker You Can Build With AI
A basic budget tracker is a realistic first project: you enter expenses, see totals by category, and compare them with a monthly limit. An AI assistant can produce a working version as a single HTML file, and because the data stays in your browser, you do not need an account, a server or a subscription.
The catch is that money tools deserve extra checking. A tracker that adds things up wrongly is worse than none, so this guide spends as much time on testing as on building.
Decide the scope first
Budget apps grow quickly if you let them. For a first version, limit yourself to:
- Adding an expense with a date, an amount, a category and an optional note.
- Showing a list of expenses for the current month.
- Showing a total per category and an overall total.
- Letting you set one monthly limit and showing how much is left.
- Deleting an expense you entered by mistake.
Leave out bank connections, charts, recurring bills and multi-currency support. Each of those can be added later, one at a time, once the basics are reliable.
A prompt that covers the details
Build a personal budget tracker as a single HTML file with CSS and JavaScript inside.
Form fields: date (default today), amount, category (dropdown: Food, Transport, Housing, Fun, Other), note.
Show this month's expenses in a table, newest first, with a delete button per row.
Show totals per category and an overall total. Show a monthly limit field and the amount remaining; turn the remaining amount red when it is negative.
Store everything in localStorage. Never send data anywhere.
Reject empty or non-numeric amounts. Store amounts as whole cents to avoid rounding errors.
Mobile friendly, plain design.
The instruction about whole cents matters. Computers store decimal numbers in a way that can produce tiny errors, such as 0.1 plus 0.2 giving 0.30000000000000004. Storing amounts as integers of cents avoids that problem, and it is a common technique worth asking for by name.
Test the totals by hand
Create a small set of expenses where you can compute the answer yourself. For example, enter 12.50 for Food, 7.25 for Food, and 40.00 for Transport. The Food total should be 19.75, Transport 40.00, and the overall total 59.75. Set a limit of 100 and confirm that 40.25 remains.
Then test the unusual cases:
- An amount of zero or a negative number.
- A very large number, such as 999999.99.
- An amount typed with a comma, like 1,200.50.
- An expense dated in the previous month, which should not count toward this month.
- Reloading the page, which should keep everything.
When one fails, report it precisely: “I entered 1,200.50 and the total shows NaN.” The assistant can usually fix a specific, reproducible problem in one reply.
Think about privacy
Everything you enter is saved in this browser on this device. That is good for privacy because nothing leaves your machine, but it also means a cleared browser or a lost laptop loses the data. If the numbers matter to you, ask the assistant to add an Export button that downloads your expenses as a CSV file, and an Import button to load one back. A CSV opens in any spreadsheet, so you also gain a free backup and a way to analyze data in other tools.
Do not paste real account numbers or statements into an AI chat while you build. Use made-up sample data for testing. The assistant only needs to know the structure of your data, not the contents.
Add features after the basics are solid
Once the totals pass your checks, consider these upgrades, one per request:
- A month selector, so you can look at previous months.
- A simple bar chart of spending by category. Ask for a chart drawn with plain HTML and CSS, to avoid external dependencies.
- A search box for notes.
- A category you can add yourself.
After each addition, rerun your known-totals test. The most common regression in a tool like this is a feature that quietly changes how a total is computed.
Keep it honest about what it is
A homemade tracker is a convenience, not financial advice, and it is not a substitute for official records. For tax purposes or anything with legal consequences, keep receipts and statements as your source of truth and ask an accountant or your local tax agency about requirements. The tracker is for your own awareness.
A note on categories
Categories decide how useful your totals are. Too few, and everything lands in “Other.” Too many, and you stop bothering to choose. Start with five or six, use them for a month, and then look at what ended up in “Other.” If one type of spending keeps showing up there, give it its own category and ask the assistant to add it. Keep the old entries as they are; you can always leave history untouched and apply new categories from today onward.
Also think about how you will enter data. Adding expenses once a day from memory is easier to keep up than logging each purchase, and the totals are close enough for a personal overview. The best tracker is the one you actually open.
When something goes wrong
If the page looks fine but a number is off, resist the temptation to ask for a rewrite. Ask the assistant to show you the function that calculates totals and to explain it step by step. You can then compare its logic with your hand calculation and point to the exact step that differs.
If the page does not load at all, check the browser console for an error, copy it, and paste it to the assistant together with the file.
Next steps
Build the first version this week and enter ten real expenses from memory, using approximate amounts, just to feel how it behaves. Run the known-totals test, then add the CSV export so your data has a backup. After two or three weeks of real use, write down what annoyed you, such as too many taps to add an expense, and use that list to decide your next three prompts.