Sage budget tracking web app

In this project, an interactive page was developed using HTML, CSS, and JavaScript - for building the page and its functionality, - and the Web Storage API for storing transactions and user preferences data. Interact with the live project here.

Features overview:

Transactions creation

Add new transactions through a simple and clean UI.

Transactions deletion

Turn on the deletion mode to see controls for removing individual transactions.

Simple data summary

Stats are calculated automatically based on created transactions.

UI theming

Light and dark UI implemented by leveraging CSS custom properties and DOM manipulation using JavaScript.

Responsive layout

With the power of CSS layout features page components have their style, size, position, and visibility changed in order to better adapt to different screen sizes.

Extra notes

• This project is purely a practical exercise intended for developing and/or showcasing my skills in the tools/techniques/concepts mentioned above. It's not meant to be a complete production-ready solution. Feel free to reach out if you have any questions or want to chat about it!
• This exercise was built following lessons by Rocketseat. It has been completely redesigned by me.