Added support for local storage persistance on the Expense Tracker app.

Author: apapadoi

Expense-Tracker/app.js

@@ -13,7 +13,7 @@ function createTransactionElement(text, amount) {
     transactionTextElement.classList.add('transaction-text');
 
     let transactionAmountElement = document.createElement('h5');
-    transactionAmountElement.textContent = `${amount < 0 ? '' : '+'} ${amount}`;
+    transactionAmountElement.textContent = `${amount < 0 ? '' : '+'}${amount}`;
     transactionAmountElement.classList.add('transaction-amount');
 
     element.appendChild(transactionTextElement);
@@ -42,7 +42,7 @@ function addTransaction(event) {
 
     let transactionText = transactionTextInput.value;
     let transactionElement = createTransactionElement(transactionText, transactionAmount);
-    
+
     document.querySelector('.history-transactions-container').appendChild(transactionElement);
 
     balance += transactionAmount;
@@ -58,7 +58,53 @@ function addTransaction(event) {
         incomeSpan.textContent = `${income.toFixed(2)}`;
         transactionElement.classList.add('income');
     }
-    transactionTextInput.value = transactionAmountInput.value = '';   
+    transactionTextInput.value = transactionAmountInput.value = '';
+    updatePersistentData(transactionText, transactionAmount);
+}
+
+async function updatePersistentData(newText, newAmount) {
+    let transactions = [];
+    const texts = document.querySelectorAll('.transaction-element .transaction-text');
+    const amounts = document.querySelectorAll('.transaction-element .transaction-amount');
+
+    for(let i=0;i<texts.length;i++) {
+        transactions.push({
+            text: texts[i].textContent,
+            amount: amounts[i].textContent.replace('+','')
+        })
+    }
+
+    localStorage.setItem('data', JSON.stringify(transactions));
+}
+
+async function loadPersistentData() {
+    const data = JSON.parse(localStorage.getItem('data'));
+    if(!data) return
+    
+    const incomeSpan = document.querySelector('.incomeValue');
+    const expenseSpan = document.querySelector('.expenseValue');
+    const balanceSpan = document.querySelector('.balanceValue');
+
+    for(let i=0;i<data.length;i++) {
+        let transactionElement = createTransactionElement(data[i].text, data[i].amount);    
+        let transactionAmount = Number(data[i].amount);
+
+        balance += transactionAmount;
+        balanceSpan.textContent = `$ ${balance.toFixed(2)}`;
+
+        if(transactionAmount < 0) {
+            expense -= transactionAmount;
+            expenseSpan.textContent = `${expense.toFixed(2)}`;
+            transactionElement.classList.add('expense');
+        }
+        else {
+            income += transactionAmount;
+            incomeSpan.textContent = `${income.toFixed(2)}`;
+            transactionElement.classList.add('income');
+        }
+
+        document.querySelector('.history-transactions-container').appendChild(transactionElement);
+    }
 }
 
 function main() {
@@ -68,6 +114,8 @@ function main() {
 
     const transactionButton = document.querySelector('button');
     transactionButton.addEventListener('click', addTransaction);
+
+    loadPersistentData();
 }
 
 window.onload = main;