How cedrexpelagio/expensy works
Expensy is a browser-based expense and budget tracker. Users manage expenses through a form, see them in a list, filter by category, and view a recalculated total. The single JavaScript module handles these interactions and persists expenses and user-added categories in browser local storage; the HTML supplies the interface and CSS styles it. The README also documents dynamic categories and add, edit, and delete flows. Source evidence is limited to the sampled script, so specific HTML element details and styling internals are not expanded.
Main entry points: script.js Interaction controller · index.html Expense page · style.css Visual styling
Components 12
User interface
- Expense page
index.html - Visual styling
style.css
Expense management
- Interaction controller
script.js - Expense form
index.html - Expense list
index.html - Expense total
index.html - Expense records
script.js
Category management
- Category form
index.html - Category choices
index.html - Category records
script.js
Browser persistence
- Local storage
Other components
- User
Connections 18
- User → Expense page: uses
- Expense page → Visual styling: styled by
- Expense page → Interaction controller: loads
- User → Expense form: enters expense
- Expense form → Interaction controller: submits
- Interaction controller → Expense records: adds or edits
- Interaction controller → Expense records: deletes
- Interaction controller → Expense records: filters
- Interaction controller → Expense list: renders
- Interaction controller → Expense total: updates
- User → Category form: adds category
- Category form → Interaction controller: submits
- Interaction controller → Category records: records
- Interaction controller → Category choices: adds choices
- Expense records → Local storage: saved in
- Local storage → Interaction controller: loads expenses
- Category records → Local storage: saved in
- Local storage → Interaction controller: loads categories