keep moving forward

Author: Tduncan14

expenseTracker/script.js

@@ -0,0 +1,57 @@
+
+const balance = document.getElementById('balance');
+const money_plus = document.getElementById('money-plus');
+const money_minus = document.getElementById('money-minus');
+const list = document.getElementById('list');
+const form = document.getElementById('form');
+const text = document.getElementById('text');
+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 }
+]
+
+
+let transactions = dummyTransactions
+
+//  Add transactions to DOM list
+
+
+function addTransactionDOM(transaction) {
+    //   Get sign
+
+    const sign = transaction.amount < 0 ? '-' : '+'
+
+
+    const item = document.createElement('li')
+
+
+    // 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>`
+
+
+
+
+    list.appendChild(item);
+
+}
+
+
+// init app
+
+function init() {
+    list.innerHTML = ''
+
+    transactions.forEach(addTransactionDOM)
+}
+
+
+init()

expenseTracker/style.css

@@ -140,7 +140,7 @@ input[type='text'].input[type='number'] {
 }
 
 
-.li li.minus {
+.list li.minus {
     border-right: 5px solid #c0392b;
 }
 
@@ -171,4 +171,5 @@ input[type='text'].input[type='number'] {
 .btn:focus,
 .delete-btn:focus {
     outline: 0;
+
 }