No transactions recorded yet. Add one to get started!
Search & Filter
Finance Tracker Regex Examples:
/\.\d{2}\b/: Cents present
/(coffee|tea)/i: Beverage keyword
/\b(\w+)\s+\1\b/: Duplicate words (Advanced)
Add/Edit Transaction
Settings
Currency & Budget
Theme
Light/Dark
Data Persistence (Import/Export)
Export Data
Import Data
Upload JSON File
Choose a JSON file to import your data
About Student Finance Tracker
This is a Student Finance Tracker application developed for a Summative Assignment focused on building a responsive, accessible UI using only vanilla HTML, CSS, and JavaScript.
Key Features Demonstrated (Rubric Compliance):
Responsive Design (M2, M7): Mobile-First approach with three responsive breakpoints (Mobile, Tablet, Desktop) using Flexbox and media queries. Includes a tasteful CSS animation/transition (new record fade-in).
Accessibility (M7): Semantic HTML landmarks, visible focus styles, keyboard navigation, skip-to-content link, and ARIA live regions for status updates.
Regex (M3, M4): Four validation rules in the form (including the advanced back-reference check for duplicate words) and live search with safe compilation and <mark> highlighting.
Persistence (M6, Stretch): Auto-save to localStorage, JSON import/export, and Dark Mode preference persistence.
Dashboard/Stats (M5): Calculates total spend, top category, and includes a CSS/JS dynamic bar chart for the 7-day trend. Budget cap uses ARIA live regions (polite/assertive).
Modular Code (M4): Logic is conceptually separated into State, Storage, UI, Validation, and Search handlers.