This is a budget-tracking app that I developed for an online course on advanced JavaScript. This app prompts users to input incomes and expenses and displays an updated counter with the total available budget, total income and total expenses. It also shows what percent of the total budget each expense consumes. Finally, users can add or delete income and expense items, prompting the app to update its data.

My Process

The HTML and CSS for this project were provided by the course instructor, and I was required to write the JavaScript. This app was developed using the common model-view-controller application architecture. A diagram illustrating the model view controller application model

In this structure, the program is split into three modules. The view module controls the visual layer and takes input from the UI. The model module stores and processes the income and expense data, and returns totals and percentages. Finally, the controller module interfaces between the model and view modules by calling public methods from the other two modules. Each is contained in an immediately invoked function expression (IIFE) that limits each other module’s access to functions and variables. This maintains a separation of concerns between modules, and allows for easier maintenance and debugging.

The Finished Product

Screenshot of Budgety app

The final project is now available on my Github page.

Get in Touch

Interested in working together? Click the big button below.

Send me an Email