Bug fixes on allowance creation.

Create slider for allowance creation.

src/views/css/createAllowance.css

@@ -0,0 +1,48 @@
+#CreateAllowance h2{
+    text-align: center;
+}
+
+#CreateAllowance .switch{
+  position: relative;
+  display: inline-block;
+  width: 50px;
+  height: 28px;
+}
+
+#CreateAllowance .switch input{
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+#CreateAllowance .slider{
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--textMuted, #ccc);
+  transition: 0.4s;
+  border-radius: 34px;
+}
+
+#CreateAllowance .slider::before{
+  position: absolute;
+  content: "";
+  height: 20px;
+  width: 20px;
+  left: 4px;
+  top: 4px;
+  background-color: white;
+  transition: 0.4s;
+  border-radius: 50%;
+}
+
+#CreateAllowance .switch input:checked + .slider{
+  background-color: var(--accent, #D4AF37);
+}
+
+#CreateAllowance .switch input:checked + .slider::before{
+  transform: translateX(22px);
+}

src/views/css/index.css

@@ -1,2 +1,133 @@
-.buttonBox{position:absolute;top:15px;right:15px}#AddMenu{background:var(--surface);border:5px solid var(--secondary)}#AddMenu .button{width:100%;max-width:750px;padding:15px}:root{--primary: #6E4B3A;--secondary: #3A5A85;--accent: #D4AF37;--background: #F9F6F0;--surface: #DCD6CF;--textMain: #2A2A2A;--textMuted: #6D6D6D;--error: #B7410E;--success: #708238}*{margin:0;padding:0;box-sizing:border-box}body{height:100vh;width:100vw;background:var(--background);color:var(--textMain)}.logo{position:absolute;top:35px;left:35px;z-index:100}.page{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;position:relative;padding:10px}.standardForm{display:flex;flex-direction:column;width:100%;max-width:550px;background:var(--surface);padding:10px}.standardForm h1{text-align:center}.standardForm label{display:flex;flex-direction:column;font-size:22px;margin:5px 0}.standardForm input{font-size:22px;padding:5px 0 5px 10px}.standardForm button,.button{font-size:22px;margin:10px 0;background:var(--primary);border:none;color:var(--accent);padding:10px;font-weight:700;cursor:pointer}.standardForm button.cancel,.button.cancel{background:var(--error);color:#fff}.button.circle{display:flex;justify-content:center;align-items:center;border-radius:50%;height:50px;width:50px;font-size:35px}.link,.standardForm .link{background:none;border:none;font-size:18px;color:var(--textMuted);cursor:pointer;text-decoration:underline;margin:0}.notifier{position:absolute;bottom:35px;left:50%;transform:translate(-50%);width:100%;max-width:750px;padding:15px 35px;font-size:18px;font-weight:700;text-align:center;z-index:100;color:#fff}.notifier.error{background:var(--error)}.notifier.success{background:var(--success)}
-/*# sourceMappingURL=index.css.map */
+@import "./home.css";
+@import "./addMenu.css";
+@import "./createAllowance.css";
+
+:root {
+    --primary: #6E4B3A;
+    --secondary: #3A5A85;
+    --accent: #D4AF37;
+    --background: #F9F6F0;
+    --surface: #DCD6CF;
+    --textMain: #2A2A2A;
+    --textMuted: #6D6D6D;
+    --error: #B7410E;
+    --success: #708238;
+}
+
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body{
+    height: 100vh;
+    width: 100vw;
+    background: var(--background);
+    color: var(--textMain);
+}
+
+.logo{
+    position: absolute;
+    top: 35px;
+    left: 35px;
+    z-index: 100;
+}
+
+.page{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    position: relative;
+    padding: 10px;
+}
+
+.standardForm{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 550px;
+    background: var(--surface);
+    padding: 10px;
+}
+
+.standardForm h1{
+    text-align: center;
+}
+
+.standardForm label{
+    display: flex;
+    flex-direction: column;
+    font-size: 22px;
+    margin: 5px 0;
+}
+
+.standardForm input{
+    font-size: 22px;
+    padding: 5px 0 5px 10px;
+}
+
+.standardForm button,
+.button{
+    font-size: 22px;
+    margin: 10px 0;
+    background: var(--primary);
+    border: none;
+    color: var(--accent);
+    padding: 10px;
+    font-weight: 700;
+    cursor: pointer;
+}
+
+.standardForm button.cancel,
+.button.cancel{
+    background: var(--error);
+    color: #fff;
+}
+
+.button.circle{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    height: 50px;
+    width: 50px;
+    font-size: 35px;
+}
+
+.link,
+.standardForm .link{
+    background: none;
+    border: none;
+    font-size: 18px;
+    color: var(--textMuted);
+    cursor: pointer;
+    text-decoration: underline;
+    margin: 0;
+}
+
+.notifier{
+    position: absolute;
+    bottom: 35px;
+    left: 50%;
+    transform: translate(-50%);
+    width: 100%;
+    max-width: 750px;
+    padding: 15px 35px;
+    font-size: 18px;
+    font-weight: 700;
+    text-align: center;
+    z-index: 100;
+    color: #fff;
+}
+
+.notifier.error{
+    background: var(--error);
+}
+
+.notifier.success{
+    background: var(--success);
+}

src/views/js/Elem.js

@@ -1,6 +1,10 @@
 export default class Elem {
     constructor(elem){
-        this.elem = document.createElement(elem);
+        if(typeof elem === "string"){
+            this.elem = document.createElement(elem);
+        }else{
+            this.elem = elem;
+        }
     }
 
     id(v){
@@ -38,6 +42,11 @@ export default class Elem {
         return this;
     }
 
+    onchange(v){
+        this.elem.onchange = v;
+        return this;
+    }
+
     min(v){
         this.elem.min = v;
         return this;
@@ -48,6 +57,19 @@ export default class Elem {
         return this;
     }
 
+    removeChildAt(v){
+        this.elem.removeChild(this.elem.children[v]);
+        return this;
+    }
+
+    getChildAt(v){
+        console.log(v);
+        console.log(this.elem);
+        console.log(this.elem.children);
+        console.log(this.elem.children[v]);
+        return new Elem(this.elem.children[v]);
+    }
+
     required(){
         this.elem.required = true;
         return this;

src/views/js/data/Account.js

@@ -70,7 +70,8 @@ export default class Account{
         this._allowances.push({
             id: crypto.randomUUID(),
             name: name,
-            amount: amount
+            amount: amount,
+            isPercent: isPercent
         });
 
         await this.save();

src/views/js/pages/CreateAllowance.js

@@ -11,20 +11,50 @@ export default class CreateAllowance extends Page{
     async submit(event){
         event.preventDefault();
 
-        await user.account.addIncome(
+        await user.account.addAllowance(
             this.container.querySelector(".name").value,
             this.container.querySelector(".amount").value,
-            this.container.querySelector(".isPercent").value
+            this.container.querySelector(".isPercent").checked
         );
         changePage("home");
     }
 
+    updateAmount(){
+        let text, titleText, step;
+        if(event.target.checked){
+            text = "Amount (%)";
+            titleText = "(Percent of Income)"
+            step = "1"
+        }else{
+            text = "Amount ($)";
+            titleText = "(Fixed Amount)";
+            step = "0.01";
+        }
+
+        new Elem(this.container.querySelector("h2"))
+            .text(titleText);
+
+        new Elem(this.container.querySelector(".amountLabel"))
+            .text(text)
+            .append(new Elem("input")
+                .type("number")
+                .addClass("amount")
+                .min("0")
+                .step(step)
+                .placeholder(text)
+                .required()
+            );
+    }
+
     render(){
         new Elem("form")
             .addClass("standardForm")
             .onsubmit(this.submit.bind(this))
             .append(new Elem("h1")
-                .text("Create Income")
+                .text("Create Allowance")
+            )
+            .append(new Elem("h2")
+                .text("(Fixed Amount)")
             )
             .append(new Elem("label")
                 .text("Name")
@@ -37,15 +67,18 @@ export default class CreateAllowance extends Page{
                 )
             )
             .append(new Elem("label")
-                .text("Percent of Income")
+                .addClass("switch")
                 .append(new Elem("input")
                     .type("checkbox")
                     .addClass("isPercent")
                     .onchange(()=>{this.updateAmount()})
                 )
+                .append(new Elem("span")
+                    .addClass("slider")
+                )
             )
             .append(new Elem("label")
-                .text("Amount")
+                .text("Amount ($)")
                 .addClass("amountLabel")
                 .append(new Elem("input")
                     .type("number")