Simple Budget App in JavaScript Free Source Code

Introduction

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.

Features

• 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

Add Expense Form Modal

Edit Expense Form Modal

Wallet Amount Form Modal

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

DEMO VIDEO

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 :)