How atharvag0007/html_learn works
PocketTrack is a browser-only personal expense tracker. A visitor enters transactions on the Transactions page; shared JavaScript validates and stores them, then refreshes the dashboard, budget views, and reports. Monthly and category budgets and month-selected insights are separate domain features, all backed by browser LocalStorage. The four HTML pages provide the interface, with shared responsive styling. The graph uses README workflow documentation and the sampled portions of js/app.js; omitted source limits which internal calls can be shown directly.
Main entry points: app.js Transaction workflow · style.css Responsive styling · transactions.html Transactions page · index.html Dashboard page
Components 15
Pages and presentation
- Dashboard page
index.html - Transactions page
transactions.html - Budget page
budget.html - Reports page
reports.html - Responsive styling
css/style.css
Transaction management
- Transaction workflow
js/app.js - Transaction display
js/app.js - Dashboard totals
js/app.js
Budgets and insights
- Budget management
js/app.js - Budget progress
js/app.js - Monthly insights
js/app.js
Shared logic and storage
- Shared calculations
js/app.js - Data loading and saving
js/app.js - Browser LocalStorage
Other components
- Visitor
Connections 16
- Visitor → Transactions page: enters records
README.md - Transactions page → Transaction workflow: submits form
README.md - Transaction workflow → Data loading and saving: saves records
README.md - Transaction workflow → Transaction display: redraws list
js/app.js - Transaction workflow → Dashboard totals: refreshes views
README.md - Dashboard page → Dashboard totals: shows totals
README.md - Budget page → Budget management: sets limits
README.md - Budget management → Data loading and saving: saves limits
js/app.js - Budget management → Budget progress: updates progress
js/app.js - Reports page → Monthly insights: shows insights
README.md - Monthly insights → Shared calculations: calculates totals
js/app.js - Data loading and saving → Browser LocalStorage: reads and writes
js/app.js - Dashboard page → Responsive styling: uses styling
README.md - Transactions page → Responsive styling: uses styling
README.md - Budget page → Responsive styling: uses styling
README.md - Reports page → Responsive styling: uses styling
README.md