JavaScript

JavaScript Budgeting Tool Application

Posted by

Hello readers! I am excited to announce that I have finished a side project that I have been working on called Budgety. This application is meant strictly for fun and to integrate key JavaScript fundamentals into a real world project and was done through an extensive course that I have been taking (I will provide the link at the end).

I apologize for my absence over the past two months, there were personal life circumstances that demanded my undivided attention (as they should) and I am finally finding time to rest and catch up.

As stated above, the purpose of this project is to take core concepts in JavaScript such as Objects, Function Constructors, the Prototype Chain, IIFEs, Closures, etc and show what they would look like within a real life application.

The features of this app include:

  • Allowing user to add monthly income and expenses
  • Depending on the financial type, add them into their designated column below
  • On each expense, show the percentage of that expense as it pertains to your overall income
  • On the parent tiles at the top, show the overall income and expenses with the overall percentage compared to the income

A large portion of this project external of the UI was the overall architecture and data structure of the application, which you can view below:

Budget Controller: part of the app that handles the data storage and manipulation tasks and contains all of the business logic

App Controller: part of the app that receives both the Budget Controller IIFE and the UI Controller IIFE and acts as the central point for the functionality of the application

UI Controller: part of the app that manipulates the UI after the data manipulation for various use cases stated above

I have added all of the code to my bitbucket repository for viewing and please enhance it all you’d like and share with me the revisions/enhancements you have made and why so that I can learn! Here is the link to the course that I built the project with. Let me know if you have any questions, I’d be happy to help.