Create the view bills page.

src/views/css/viewCategory.css

@@ -7,7 +7,9 @@
     min-height: 100%;
 }
 
-#ViewIncome .switch{
+#ViewIncome .switch,
+#ViewBills .switch,
+#ViewAllowances .switch{
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -15,7 +17,9 @@
     margin: 35px 0 15px 0;
 }
 
-#ViewIncome .switch p{
+#ViewIncome .switch p,
+#ViewBills .switch p,
+#ViewAllowances .switch p{
     position: absolute;
     width: 100px;
     top: -20px;

src/views/js/data/Account.js

@@ -39,6 +39,10 @@ export default class Account{
         return this._income;
     }
 
+    get bills(){
+        return this._bills;
+    }
+
     get isPopulated(){
         return this._populated;
     }

src/views/js/data/Bill.js

@@ -1,3 +1,5 @@
+import Format from "../Format.js";
+
 export default class Bill{
     constructor(id, name, amount, active){
         this._id = id;
@@ -15,7 +17,7 @@ export default class Bill{
     }
 
     get amount(){
-        return this._amount;
+        return Format.centsToDollars(this._amount);
     }
 
     get type(){

src/views/js/index.js

@@ -16,6 +16,7 @@ import TransactionDetails from "./pages/TransactionDetails.js";
 import EditTransaction from "./pages/EditTransaction.js";
 import ViewIncome from "./pages/ViewIncome.js";
 import EditIncome from "./pages/EditIncome.js";
+import ViewBills from "./pages/ViewBills.js";
 
 const pages = document.querySelector(".page");
 let currentPage;
@@ -40,6 +41,7 @@ window.changePage = (page, data)=>{
         case "editTransaction": currentPage = new EditTransaction(data); break;
         case "viewIncome": currentPage = new ViewIncome(); break;
         case "editIncome": currentPage = new EditIncome(data); break;
+        case "viewBills": currentPage = new ViewBills(); break;
     }
     console.timeEnd("change page");
 }

src/views/js/pages/ViewBills.js

@@ -0,0 +1,100 @@
+import Page from "./Page.js";
+import Elem from "../Elem.js";
+import Format from "../Format.js";
+
+export default class ViewBills extends Page{
+    constructor(){
+        super("ViewBills", ["home", "back-viewMenu", "logout"]);
+
+        this.render(false);
+    }
+
+    generateColor(spent, amount){
+        if(amount <= 0) return "hsl(0, 100%, 50%)";
+
+        const percent = Math.min(spent / amount, 1); 
+        let hue;
+        if(percent < 0.5){
+            hue = percent / 0.5 * 45;
+        }else{
+            hue = 45 + (percent - 0.5) / 0.5 * (120 -45);
+        }
+
+        const saturation = 65 - percent * 15;
+        const lightness = 28 + (1 - Math.abs(percent - 0.5) * 2) * 10;
+
+        return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+    }
+
+    toggleActive(){
+        const showArchived = this.container.querySelector(".archiveCheckbox").checked;
+        this.renderItems(showArchived);
+    }
+
+    renderItems(showArchived){
+        const container = this.container.querySelector(".categoryContainer");
+        while(container.children.length > 0){
+            container.removeChild(container.lastChild);
+        }
+
+        const bills = user.account.bills;
+        for(let i = 0; i < bills.length; i++){
+            if(!showArchived && !bills[i].active) continue;
+            const spent = user.account.categorySpent(bills[i]);
+            const spentAsCurrency = Format.currency(spent);
+            const amount = bills[i].amount;
+            const amountAsCurrency = Format.currency(amount);
+
+            new Elem("button")
+                .addClass("viewCategoryItem")
+                .onclick(()=>{changePage("editBill", bills[i])})
+                .append(new Elem("p")
+                    .text(bills[i].name)
+                    .addClass(bills[i].active ? "none" : "strike")
+                )
+                .append(new Elem("p")
+                    .addClass("categoryItemSpent")
+                    .append(new Elem("span")
+                        .text(spentAsCurrency)
+                        .addStyle("color", this.generateColor(spent, amount))
+                    )
+                    .append(new Elem("span")
+                        .text(" / ")
+                    )
+                    .append(new Elem("span")
+                        .text(amountAsCurrency)
+                        .addStyle("color", "hsl(120, 50%, 28%)")
+                    )
+                )
+                .appendTo(container);
+        }
+    }
+
+    render(showArchived){
+        new Elem("h1")
+            .text(`${user.account.name} Bills`)
+            .appendTo(this.container);
+
+        new Elem("label")
+            .addClass("switch")
+            .append(new Elem("p")
+                .text("Show Archived")
+            )
+            .append(new Elem("input")
+                .type("checkbox")
+                .addClass("archiveCheckbox")
+                .checked(false)
+                .onchange(this.toggleActive.bind(this))
+            )
+            .append(new Elem("span")
+                .addClass("slider")
+            )
+            .appendTo(this.container);
+
+        new Elem("div")
+            .addClass("categoryContainer")
+            .appendTo(this.container);
+
+        this.renderItems(showArchived);
+    }
+}

src/views/js/pages/ViewIncome.js

@@ -41,9 +41,9 @@ export default class ViewIncome extends Page{
         for(let i = 0; i < income.length; i++){
             if(!showArchived && !income[i].active) continue;
             const spent = user.account.categorySpent(income[i]);
-            const spentAsCurrency = Format.currency(user.account.categorySpent(income[i]));
+            const spentAsCurrency = Format.currency(spent);
             const amount = income[i].amount;
-            const amountAsCurrency = Format.currency(income[i].amount);
+            const amountAsCurrency = Format.currency(amount);
 
             new Elem("button")
                 .addClass("viewCategoryItem")

src/views/js/pages/ViewMenu.js

@@ -16,6 +16,12 @@ export default class ViewMenu extends Page{
             .focus()
             .appendTo(this.container);
 
+        new Elem("button")
+            .text("Bills")
+            .addClass("button")
+            .onclick(()=>{changePage("viewBills")})
+            .appendTo(this.container);
+
         new Elem("button")
             .text("Income")
             .addClass("button")