Inspiration
As an international student that has recently moved to Canada, managing monthly expenses has proven to be a difficult task. Its not easy to keep track of everything you spent money on. Since there are a lot like me in Canada, I decided that I should create a visually interesting way for anyone to plan out their monthly expenses without worrying about all the calculations.
What it does
It is a visually appealing modifiable graph that displays all your monthly expenses. You can add or delete expenses or change each of them by dragging and moving each bar. All the calculations for the amount you have saved or lost will be done for you.
How we built it
This is a purely front-end web application with absolutely no back-end technologies involved. I only used HTML, CSS and JavaScript.
Challenges we ran into
Since I am mostly a beginner in the front-end programming world, Many issues I ran into mostly involved understanding how various CSS attributes worked; like flex and grid. Creating the bars required loads of calculation and often times I would face issues in implementing the correct width, height and position of every bar.
What we learned
I feel like I have mastered the basics of front-end development and am ready to try out a more advanced level of HTML, CSS and JavaScript.
Log in or sign up for Devpost to join the conversation.