Devlog#3 : Building a Persistent Teen Budget TrackerMost budgeting tools are incredibly boring, designed by adults who think teenagers only care about calculating tax returns or retirement funds. This is why I built the Teen Budget Tracker—a client-side personal finance dashboard engineered from the ground up for students and teens who want to stop guessing and start tracking real-world goals, like saving up for a gaming console, a new GPU, or hardware kits, using their actual weekly allowance (after buying snacks, obviously!).The original prototype was just a volatile math calculator that completely forgot your data the second you hit refresh, but thanks to brutal peer evaluations and quality feedback, I executed a massive code intervention. First, I wiped out embarrassing typography bugs, standardizing every instance of “traker” to a clean, crisp Tracker. Then, I shattered the application’s rigid, desktop-only layout constraints. By swapping static elements for adaptive fluid boundaries like width: 100% and a protective .box { max-width: 500px; } boundary card, the interface now scales flawlessly on tablets, phones, and monitors without ugly horizontal screen breaks. To give it a truly universal edge, I replaced the flat, single-currency layout with a dynamic mapping framework linked straight to a JavaScript dictionary object (currency Symbols), allowing users to toggle natively between $, ₹, £, and € symbols on the fly.To make the app feel alive the absolute second it boots up, I injected a real-time system clock engine using a native JavaScript interval loop. Running strictly every 1000 milliseconds, it continuously feeds a live date-time timestamp into #timeElement so the interface actively moves with the user. Even better, I engineered a bulletproof two-way data preservation loop using browser localStorage to cure the annoying page-refresh amnesia. The save routine instantly commits everything—the item name, cost, and savings—to browser memory the exact moment Calculate Weeks is clicked. On boot up, a window load listener interrogates the client cache, seamlessly extracts the saved parameters, populates the input fields, and triggers calcButton.click() on its own. Your session is perfectly preserved, even if you close the tab or accidentally reload.The crown jewel of the logic is the dynamic Milestone Progress Allocation Engine, which syncs beautifully with the smooth width transitions of #probar to offer gamified financial feedback. Instead of staring at cold, flat numbers, the #statss block tracks completion percentages and updates with context-specific motivation: cross the 100% line and it proudly announces “You can buy [Item] now!”; smash past 75% and it reads “You will be able to buy [Item] very soon”; clear the 50% halfway mark to unlock “You have completed halfway”; push past 25% for “You are making progress”; and anything below that keeps you grounded with “You have just started”. Building this application taught me serious real-world engineering skills, from managing persistent browser states and writing fluid UI architectures to deploying defensive code boundaries by wrapping asynchronous operations and API fallbacks inside clean try…catch blocks so a single network glitch never crashes the app.