Simple Budget App in JavaScript Free Source Code



This is a mini-project called Simple Budget Application. This is a very simple web-based application that manages the user budget and expenses. The application was developed using JavaScript. It uses the browser's local storage as the data storage. The application contains Create, Read, Update, and Delete Operations for expenses. This has a pleasant user interface using the Bootstrap v5 Framework. Overall, the project contains user-friendly features and functionalities.

About the Simple Budget Application

I developed this project using the following:

  • HTML
  • CSS
  • JavaScript
  • Bootstrap v5
  • Font-Awesome

This Simple Simple Budget Application allows the user to manage his/her budget and expenses. He/She can update his/her wallet amount that serves as the main budget. Users can also add, list, edit, and delete expenses. The system requires the user to enter an expense name and amount in order to save the expense data. The Add and Edit Expense forms are displayed using the bootstrap Modal which popups or is shown when the designated buttons are triggered or clicked. The system displays a summary of the user budget, expenses, and balance that is shown at the center panel of the screen. The system has a confirmation feature for deleting expense data to prevent the unintentional deletion of data.

Here, you can learn how to manipulate DOM in JavaScript and you will have knowledge on how to manage array or JSON data in javascript and store or manage it using the web browser's local storage. The application user interface was developed with the bootstrap v5 framework.


  • Action buttons Panel
  • Summary Panel
  • Expense List Panel
  • Update Wallet Amount/Budget
  • Add New Expense
  • List Expenses
  • Edit Expense
  • Delete Expense
  • Confirmation to prevent Unintentional deletion of expense data

The source code was developed only for educational purposes only. You can download the source code for free and modify it the way you wanted.

Sample Snapshot of the Application

App User Interface

Simple Budget Application

Add Expense Form Modal

Simple Budget Application

Edit Expense Form Modal

Simple Budget Application

Wallet Amount Form Modal

Simple Budget Application

How to Run ??

  1. Download the provided source code zip file. (download button is located below)
  2. Extract the downloaded source code zip file in your desired location.
  3. Locate the index.html file inside the extracted source code folder.
  4. Open the index.html file in your preferred web browser.
  5. Or, Browse the Simple Budget Application in a browser. i.e. file:///C:/users/default/desktop/budget_app/index.html


That's it. I hope this simple Simple Budget Application in JavaScript will help you with what you are looking for and you'll find something useful for your future web application projects.

Explore more on this website for more Free Source Codes and Tutorials.

Enjoy :)

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.


1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment