feat(expenses): add total counter

public/expenses/dom.js

@@ -49,7 +49,7 @@ const updateExpensesDOM = (expenses = db.toArray()) => {
         let totalHolder = document.createElement("div");
         totalHolder.classList.add("expense");
         totalHolder.innerHTML = `
-            <div class="expense-name"><b>Total</b></div>
+            <div class="expense-name"><b>Total (${expenses.length} expense${expenses.length === 1 ? "" : "s"})</b></div>
             <div class="expense-amount"><b>${total.toFixed(2)} ${db.currency()}</b></div>
             <div></div>
             <div></div>
@@ -178,6 +178,7 @@ const updateUpcomingExpensesDOM = () => {
         // interval can happen multiple times in the threshold
         // monthly can only happen once in the threshold
         let total = 0;
+        let items = 0;
         let now = +new Date();
         upcomingExpenses.forEach(expense => {
             if (expense.scheduleType === "interval") {
@@ -187,6 +188,7 @@ const updateUpcomingExpensesDOM = () => {
                 }
                 while (lastDate - now < db.upcomingThreshold() * 86400000) {
                     total += parseFloat(expense.amount);
+                    items++;
                     lastDate += expense.interval * 86400000;
                 }
             } else if (expense.scheduleType === "monthly") {
@@ -197,6 +199,7 @@ const updateUpcomingExpensesDOM = () => {
                 }
                 if (lastDate - now < db.upcomingThreshold() * 86400000) {
                     total += parseFloat(expense.amount);
+                    items++;
                 }
             }
         });
@@ -204,7 +207,7 @@ const updateUpcomingExpensesDOM = () => {
         let totalHolder = document.createElement("div");
         totalHolder.classList.add("expense");
         totalHolder.innerHTML = `
-            <div class="expense-name"><b>Total</b></div>
+            <div class="expense-name"><b>Total (${items} item${items === 1 ? "" : "s"})</b></div>
             <div class="expense-date"></div>
             <div class="expense-amount"><b>${total.toFixed(2)} ${db.currency()}</b></div>
         `;