code full for money balace but missing some code cleaning regarding html file

Author: BaselAdoum

prep/dom-tutorial/index.html

@@ -98,7 +98,7 @@ <h2>Transaction History</h2>
       </div>
     </div>
 
-    <footer class="footer">
+    <!-- <footer class="footer">
       <div class="footer-content">
         <div class="footer-left">
           <img class="footer-logo" src="./images/favicon.png" />
@@ -149,7 +149,7 @@ <h2>Transaction History</h2>
           </p>
         </div>
       </div>
-    </footer>
+    </footer> -->
 
     <script src="./script.js"></script>
   </body>

prep/dom-tutorial/script.js

@@ -0,0 +1,97 @@
+let all_transaction = [];
+
+const transaction_form = document.getElementById("transactionForm");
+const transaction_list = document.getElementById("transactionList");
+
+const total_balance = document.getElementById("totalBalance");
+const total_income = document.getElementById("totalIncome");
+const total_expense = document.getElementById("totalExpense");
+
+function updateList(type, amount, date, category) {
+  const itemEl = document.createElement("li");
+  const iconEl = document.createElement("div");
+  const detailsEl = document.createElement("div");
+  const nameEl = document.createElement("div");
+  const dateEl = document.createElement("div");
+  const amountEl = document.createElement("div");
+  const deleteEl = document.createElement("button");
+
+  itemEl.classList.add("transaction-item");
+  iconEl.classList.add("transaction-icon");
+  detailsEl.classList.add("transaction-details");
+  nameEl.classList.add("transaction-name");
+  dateEl.classList.add("transaction-date");
+  amountEl.classList.add("transaction-amount");
+  deleteEl.classList.add("transaction-delete");
+
+  iconEl.innerText = type === "Income" ? "↑" : "↓";
+  iconEl.classList.add(type === "Income" ? "income" : "expense");
+
+  nameEl.innerText = category;
+  dateEl.innerText = new Date(date).toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  });
+
+  amountEl.innerText = (type === "Income" ? "+" : "-") + "$" + amount;
+  amountEl.classList.add(type === "Income" ? "income" : "expense");
+
+  deleteEl.innerText = "x";
+  deleteEl.addEventListener("click", deleteTransaction);
+
+  detailsEl.appendChild(nameEl);
+  detailsEl.appendChild(dateEl);
+  itemEl.appendChild(iconEl);
+  itemEl.appendChild(detailsEl);
+  itemEl.appendChild(amountEl);
+  itemEl.appendChild(deleteEl);
+
+  transaction_list.prepend(itemEl);
+}
+
+function deleteTransaction(event) {
+  const btn = event.currentTarget;
+  const itemEl = btn.closest(".transaction-item");
+
+  const index = Array.from(transaction_list.children).indexOf(itemEl);
+  all_transaction.splice(index, 1);
+  updateBalance();
+
+  itemEl.remove();
+}
+
+function updateBalance() {
+  let income = 0;
+  let expense = 0;
+  let balance = 0;
+
+  all_transaction.forEach((transaction) => {
+    if (transaction.type === "Income") {
+      income += parseFloat(transaction.amount);
+      balance += parseFloat(transaction.amount);
+    } else {
+      expense += parseFloat(transaction.amount);
+      balance -= parseFloat(transaction.amount);
+    }
+  });
+
+  total_balance.innerText = "$" + balance;
+  total_income.innerText = "$" + income;
+  total_expense.innerText = "$" + expense;
+}
+
+transaction_form.addEventListener("submit", function (event) {
+  event.preventDefault();
+
+  const type = event.target.type.value;
+  const amount = event.target.amount.value;
+  const date = event.target.date.value;
+  const category = event.target.category.value;
+
+  updateList(type, amount, date, category);
+  all_transaction.unshift({ type, amount, date, category });
+  updateBalance();
+
+  transaction_form.reset();
+});