31th JavaScript Project - OOP Budget App Tutorial with source Code

Object Oriented JavaScript Project Source Code:

Steps to create:
Budget Section submit:
1. Create UI Class and get all input fields element
2. create id and arrayOfExpence properties
3. use DOMContentLoaded to initialize submit event
4. create submit event for both form
5. create an object of UI class
6. create a BugetSubmit function in class
7. if the value is blank and it is less than zero show error
8. else show the budget on Amount Details section
7. once budget is added show the total create function for showTotal
8. create function to showExpense
9. call showExpense and showTotal on button click

Expense Section submit:
1. create expenseSubmit() function on UI class
2. validation if blank or less than zero show error
3. create Object expenses
4. pass the object into array and increment the id
5. clear all fields for next input
6. create function appendOnDynamicDiv(), and pass the array as arguments
7. create a dynamic row to append on expense List
8. on each expense submit, modify expense and total amount
9. get total amount of expense appended on expenseList

Modify array on clicking button
1. choose parent to provide click event using event delegation
2. match the class, and pass the element to UI function
3. create removeExpense
4. and remove from the array as well using the data-id
5. on remove, recalculate the total