My Wallet
A dark interface for a web application designed for recording and tracking income and expenses over time periods has been developed.
Implemented functionality:
- Application header with the title and period switcher (Week / Month / Year / All time) — implemented through a group of buttons with an active state (active state via CSS class)
- Two-column layout using CSS Grid: transaction feed on the left and summary panel on the right
- Summary block with a grid of indicators: Income (green), Expenses (red), Balance (yellow) — color coding of data through CSS variables
- By Category block for displaying expenses by categories
- Empty states for blocks without data with hints for the user
- Fixed + Add entry button at the bottom of the screen (position: fixed / sticky) with rounded edges and a purple accent color
- Dark theme design with multi-layered background shades to create visual depth between layers.
Implemented functionality:
- Application header with the title and period switcher (Week / Month / Year / All time) — implemented through a group of buttons with an active state (active state via CSS class)
- Two-column layout using CSS Grid: transaction feed on the left and summary panel on the right
- Summary block with a grid of indicators: Income (green), Expenses (red), Balance (yellow) — color coding of data through CSS variables
- By Category block for displaying expenses by categories
- Empty states for blocks without data with hints for the user
- Fixed + Add entry button at the bottom of the screen (position: fixed / sticky) with rounded edges and a purple accent color
- Dark theme design with multi-layered background shades to create visual depth between layers.