keep moving forward

Author: Tduncan14

expenseTracker/script.js

@@ -9,15 +9,69 @@ const amount = document.getElementById('amount');
 
 
 
-const dummyTransactions = [
-    { id: 1, text: 'Flower', amount: -20 },
-    { id: 2, text: 'Salary', amount: 300 },
-    { id: 3, text: 'Book', amount: -10 },
-    { id: 4, text: 'Camera', amount: 150 }
-]
+const localStorageTransactions = JSON.parse(localStorage.getItem('transactions'))
+
+
+
+// const dummyTransactions = [
+//     { id: 1, text: 'Flower', amount: -20 },
+//     { id: 2, text: 'Salary', amount: 300 },
+//     { id: 3, text: 'Book', amount: -10 },
+//     { id: 4, text: 'Camera', amount: 150 }
+// ]
+
+let transactions = localStorage.getItem('transactions') !== null ? localStorageTransactions : []
+
+
+
+// add transaction
+
+
+
+
+function addTransaction(e) {
+    e.preventDefault()
+
+    if (text.value.trim() === '' || amount.value.trim() === '') {
+        alert('Please add text and amount')
+
+    }
+
+    else {
+        const transaction = {
+
+            id: generateId(),
+            text: text.value,
+            amount: Number(amount.value)
+        }
+
+
+        transactions.push(transaction)
+
+        addTransactionDOM(transaction)
+
+        updateValues()
+
+        updateLocalStorage()
+
+        text.value = '';
+
+        amount.value = ''
+    }
+
+
+
+
+}
+
+// generate random id
+
+function generateId() {
+    return Math.floor(Math.random() * 1000000000)
+}
+
 
 
-let transactions = dummyTransactions
 
 //  Add transactions to DOM list
 
@@ -29,29 +83,92 @@ function addTransactionDOM(transaction) {
 
 
     const item = document.createElement('li')
+    const button = document.createElement('btn');
+
+
+    button.classList.add('delete-btn')
+    button.innerHTML = 'X'
+    // <button class="delete-btn" onClick="removeTransaction(${transaction.id})> X </button>
+
+    button.addEventListener('click', function () {
+        removeTransaction(transaction.id);
+    });
 
 
     // add class based on value
     item.classList.add(transaction.amount < 0 ? 'minus' : 'plus')
 
 
-    item.innerHTML = `${transaction.text}   <span>${sign} ${Math.abs(transaction.amount)}</span> <button class="delete-btn"> X </button>`
-
+    item.innerHTML = `${transaction.text}   <span>${sign} ${Math.abs(transaction.amount)}</span>`
+    item.appendChild(button)
 
 
 
     list.appendChild(item);
 
+
+}
+
+
+// update the balance and expence
+
+
+
+function updateValues() {
+    const amounts = transactions.map(transaction => transaction.amount)
+
+    const total = amounts.reduce((acc, item) => (acc += item), 0).toFixed(2)
+
+
+    const income = amounts.filter(item => item > 0).reduce((acc, item) => (acc += item), 0).toFixed(2)
+
+
+    const expense = (amounts.filter(item => item < 0).reduce((acc, item) => (acc += item), 0) * -1).toFixed(2)
+
+
+    console.log(total, 'total', income)
+    console.log(expense)
+
+
+    balance.innerText = `$${total}`;
+    money_plus.innerText = `$${income}`
+    money_plus.classList.add('plus')
+    money_minus.innerText = `$${expense}`
+
+}
+
+
+// removes transaticon by id
+
+
+function removeTransaction(id) {
+    console.log('hello')
+    transactions = transactions.filter(trans => trans.id !== id)
+
+    updateLocalStorage()
+    init()
 }
 
 
 // init app
 
+
+
+function updateLocalStorage() {
+    localStorage.setItem('transactions', JSON.stringify(transactions))
+}
+
+
+
 function init() {
     list.innerHTML = ''
 
     transactions.forEach(addTransactionDOM)
+    updateValues()
 }
 
 
-init()
+init()
+
+
+form.addEventListener('submit', addTransaction)

expenseTracker/style.css

@@ -81,6 +81,11 @@ h4 {
     color: #2ecc71;
 }
 
+
+.plus {
+    color: #2ecc71;
+}
+
 .money.minus {
     color: #c0392b;
 }
@@ -110,7 +115,8 @@ input[type='text'].input[type='number'] {
     color: #fff;
     border: 0;
     display: block;
-    cursor: pointer font-size: 16px;
+    cursor: pointer;
+    font-size: 16px;
     margin: 10px 0 30px;
     padding: 10px;
     width: 100%;
@@ -119,7 +125,7 @@ input[type='text'].input[type='number'] {
 
 .list {
     list-style-type: none;
-    padding: 0;
+    padding: 1rem;
     margin-bottom: 40px;
 }
 
@@ -129,6 +135,7 @@ input[type='text'].input[type='number'] {
     box-shadow: var(--box-shadow);
     color: #333;
     display: flex;
+    padding: 1rem;
     justify-content: space-between;
     position: relative;
     margin: 10px 0;
@@ -140,11 +147,16 @@ input[type='text'].input[type='number'] {
 }
 
 
+
 .list li.minus {
     border-right: 5px solid #c0392b;
 }
 
 
+li:hover {
+    cursor: pointer;
+}
+
 .delete-btn {
     cursor: pointer;
     background-color: #e74c3c;
@@ -164,10 +176,12 @@ input[type='text'].input[type='number'] {
 
 .list li:hover .delete-btn {
     opacity: 1;
+    cursor: pointer;
 }
 
 
 
+
 .btn:focus,
 .delete-btn:focus {
     outline: 0;