Okay, so I wanted to get a better grip on my day-to-day spending. You know, become a bit of a ‘money maven’, but just for my own stuff, nothing too crazy. All those fancy apps felt like overkill, too many bells and whistles. I just needed something dead simple.
So, I figured, why not try building something myself? Keep it basic. I wasn’t looking to launch a startup here, just needed a personal tool.
Getting Started
First thing, I grabbed a notebook. Yeah, old school. Sketched out what I needed. Basically:
- A place to type in what I bought.
- A box for the amount.
- A button to add it to a list.
- And then, well, the list itself! Showing everything I’d added.
That was it. No categories, no charts, just the raw data so I could see it pile up.
The Build Process
I decided to make it a simple web page I could run locally in my browser. Nothing online, just for my eyes. Fired up my text editor. Started with the basic HTML structure. Used some simple input fields for the description and amount, a button, and an empty list (`
- `) tag where the expenses would show up.
- `) on the fly and stick the expense details inside them.
Storing the data was the next hurdle. It was useless if everything vanished when I closed the browser tab. Looked around and found `localStorage`. Perfect! Simple key-value storage right in the browser. Every time I added an expense, I’d save the whole list to `localStorage`. And every time the page loaded, I’d check `localStorage` and rebuild the list from whatever was saved. Took a few tries to get the saving and loading logic right, especially handling the data format, but got there eventually.
Using It
Once I had the basic add and display working, and it remembered things, I started using it. Put in my morning coffee, lunch, that pack of gum. Just tapping it in quickly became a habit. It wasn’t fancy, looked pretty plain even after I added a tiny bit of CSS so it wasn’t just black text on white.
After a week or two, just seeing that list grow was eye-opening. Didn’t need complex reports. Just seeing “Coffee – $5”, “Lunch – $12”, “Book – $20” listed out day after day made it really clear where the small leaks were. I even added a simple ‘Total’ display at the bottom later, just summing up the numbers in the list.
So yeah, that’s my little “money maven for short” project. Didn’t use any complex frameworks, just plain old web basics. It’s rough, it’s simple, but it does exactly what I set out to do: helps me keep an honest eye on my own spending without any fuss. Built it myself, use it myself. Pretty satisfying, actually.
Then came the slightly trickier part: making it actually do something. That meant diving into a bit of JavaScript. Honestly, it took some fiddling. Getting the button click to actually grab the text and the number from the input boxes wasn’t immediate. Had a few moments where I clicked ‘Add’ and nothing happened, or it added weird stuff.
One specific snag was making sure the amount was treated as a number, not just text. Had to specifically convert it. Then, I needed to figure out how to actually display it in that list I made. Learned how to create new list items (`
