Inspiration
UPI has gained much popularity in past few months and almost everyone is using UPI for any small or big transaction. In this world of UPI I have heard complaints from many people that they are not able to control their expenses because of UPI as real money is not there in hands and the exchange of money occurs virtually. Also, I have heard from many of my friends that they are not able to control themselves from spending money as they just have to scan and there you go. So, from this I thought of building a website through which expenses and income can be managed and we become aware about where money is being used.
From all this the idea of building Budget Book emerged!
What it does
Budget Book
Budget Book is a website that helps users manage their income and expenses and visualize spending patterns to make smarter financial decisions. When we add our income or expenses then based on that history is generated and also interactive charts are being generated for visual understanding of all expenses and income Vs expenses. Even we can remove unwanted transaction from the history.
How I built it
Budget Book is purely built with front-end web technologies.
- Html : Through Html I build the basic layout of all the webpages like adding text, input fields and buttons.
- CSS : Through CSS I made the basic layout made through Html into eye-catching, user appealing and styled webpages with better alignment and orientation of all the text, input fields and buttons in them.
- JavaScript : After all the Layout and designing it's finally time to add the functionality to all the webpages like the button functionality, input field functionality, generating charts and also the hover effect and connecting them and turning into a website.
Note: Budget Book uses CDN library(Chart.js) for interactive chart generation. No additional installation required as it is included via script tag in Html files.
Challenges I ran into
- Issues regarding automatically updating total balance, income and expenses
- Working on with developing chart's JavaScript
- The removing of transaction from the history
But try solving it and finally that worked!
Accomplishments that I'm proud of
As a beginner I'm proud of developing this website all by myself and being able to participate in "Code Spring" hackathon with this Budget Book project. Grateful to be a participant in "Code Spring" hackathon and learning many new things while developing this Budget Book project.
What I learned
I learned many new syntaxes, faced many errors and each error was a lesson of learning, many different functions, many different CSS styling and properties, discovered many new html elements and a great experience as a participant of "Code Spring" hackathon.
What's next for Budget Book
Will work on adding following features:
- Dark/Light mode
- Filter for monthly transactions
- Chart generation based on the filtered transactions
Log in or sign up for Devpost to join the conversation.