Add ability to update account balance if needed.

src/views/css/home.css

@@ -30,3 +30,7 @@
 #Home .amountFull{
     color: hsl(120, 50%, 28%);
 }
+
+#Home .balance input{
+    font-size: 22px;
+}

src/views/js/Elem.js

@@ -63,7 +63,28 @@ export default class Elem {
     }
 
     onclick(v){
-        this.elem.onclick = v;
+        if(this.click) this.elem.removeEventListener("click", this.click);
+        this.click = v;
+        this.elem.addEventListener("click", v);
+        return this;
+    }
+
+    removeOnclick(){
+        if(this.click) this.elem.removeEventListener("click", this.click);
+        this.click = undefined;
+        return this;
+    }
+
+    onkeydown(v){
+        if(this.keydown) this.elem.removeEventListener("keydown", this.keydown);
+        this.keydown = v;
+        this.elem.addEventListener("keydown", v);
+        return this;
+    }
+
+    removeOnkeydown(v){
+        if(this.keydown) this.elem.removeEventListener("keydown", this.keydown);
+        this.keydown = undefined;
         return this;
     }
 

src/views/js/pages/Home.js

@@ -34,6 +34,32 @@ export default class Home extends Page{
         this.render(month);
     }
 
+    submitOnEnter(event){
+        console.log(event);
+        if(event.key === "Enter"){
+            user.account.balance = Format.dollarsToCents(this.container.querySelector(".balance input").value);
+            user.account.save();
+
+            new Elem(this.container.querySelector(".balance dd"))
+                .clear()
+                .text(Format.currency(user.account.balance));
+        }
+    }
+
+    editBalance(){
+        this.balanceContainer.removeOnclick();
+
+        new Elem(this.container.querySelector(".balance dd"))
+            .text("")
+            .append(new Elem("input")
+                .type("number")
+                .step("0.01")
+                .value(user.account.balance / 100)
+                .onkeydown(this.submitOnEnter.bind(this))
+                .focus()
+            );
+    }
+
     generateColor(spent, amount){
         if(amount <= 0) return "hsl(0, 100%, 50%)";
 
@@ -97,13 +123,15 @@ export default class Home extends Page{
             .text(month)
             .appendTo(this.container);
 
-        new Elem("dl")
+        this.balanceContainer = new Elem("dl")
+            .addClass("balance")
             .append(new Elem("dt")
                 .text("Balance: ")
             )
             .append(new Elem("dd")
                 .text(Format.currency(user.account.balance))
             )
+            .onclick(this.editBalance.bind(this))
             .appendTo(this.container);
 
         new Elem("dl")