Here are the main features of the expense calculator:
-
HTML Elements: The code sets up various HTML elements using
document.getElementById()
to retrieve elements with specific IDs. These elements include the balance display, income display, expense display, transaction list, input form for adding new transactions, and a clear button to remove transactions. -
Transactions Array: The app maintains a
transactions
array to store the individual transaction objects. Each transaction object has anid
,text
(description of the transaction), andamount
(the value of the transaction, positive for income and negative for expenses). -
Dummy Transactions: The code provides a sample set of
dummyTransactions
, representing some initial data. This data is used to populate the transaction list on the page load if there are no transactions stored in the local storage. -
Local Storage: The app uses the browser's local storage to store the
transactions
array as a JSON string. This ensures that the user's transactions persist across page reloads. -
Adding Transactions: The
addTransactions()
function is responsible for adding new transactions. It validates the input fields (transaction text and amount) and, if valid, creates a new transaction object, adds it to thetransactions
array, updates the DOM to display the new transaction, clears the input fields, and updates the balance, income, and expense values. -
Generating ID: The
generateID()
function generates a random unique ID for each transaction usingMath.random()
andMath.floor()
. -
Displaying Transactions: The
addTransactionDOM()
function adds a new transaction to the DOM by creating an<li>
element and appending it to the transaction list (<ul>
). The transaction text, amount, and a delete button are displayed within the list item. The list item's class is set to 'plus' for income transactions and 'minus' for expense transactions to style them accordingly. -
Updating Values: The
updateValues()
function calculates the total balance, total income, and total expenses based on the transactions and updates these values in the DOM. -
Removing Transactions: The
removeTransaction(id)
function removes a specific transaction from thetransactions
array based on its ID. It then updates the local storage and reinitializes the app to reflect the updated transactions. -
App Initialization: The
Init()
function clears the transaction list in the DOM, adds each transaction from thetransactions
array to the DOM usingaddTransactionDOM()
, and updates the balance, income, and expense values. -
Event Listeners: Event listeners are set up for the form submit and clear button click events to call
addTransactions()
andclearHistory()
, respectively.
Note: The clearHistory()
function, as implemented, removes all transactions instead of clearing a specific transaction's history. This behavior may not be desired in a real-world application.
Overall, the expense calculator app provides a simple way for users to keep track of their income and expenses and view their current financial status. However, for production use, additional features, error handling, and improvements may be necessary.