Create 'create income' page.

Add style for a cancel button.

src/views/css/index.css

@@ -41,7 +41,7 @@ body{
     height: 100%;
     width: 100%;
     position: relative;
-    padding: 15px;
+    padding: 10px;
 }
 
 .standardForm{
@@ -50,7 +50,7 @@ body{
     width: 100%;
     max-width: 550px;
     background: var(--surface);
-    padding: 35px;
+    padding: 10px;
 }
 
 .standardForm h1{
@@ -61,7 +61,7 @@ body{
     display: flex;
     flex-direction: column;
     font-size: 22px;
-    margin: 15px 0;
+    margin: 5px 0;
 }
 
 .standardForm input{
@@ -71,7 +71,7 @@ body{
 
 .standardForm button, .button{
     font-size: 22px;
-    margin: 15px 0;
+    margin: 10px 0;
     background: var(--primary);
     border: none;
     color: var(--accent);
@@ -80,6 +80,11 @@ body{
     cursor: pointer;
 }
 
+.standardForm button.cancel, .button.cancel{
+    background: var(--error);
+    color: white;
+}
+
 .button.circle{
     display: flex;
     justify-content: center;

src/views/js/index.js

@@ -6,6 +6,7 @@ import Register from "./pages/Register.js";
 import Home from "./pages/Home.js";
 import AddMenu from "./pages/AddMenu.js";
 import CreateAccount from "./pages/CreateAccount.js";
+import CreateIncome from "./pages/CreateIncome.js";
 
 const pages = document.querySelector(".page");
 let currentPage;
@@ -20,6 +21,7 @@ window.changePage = (page, data)=>{
         case "home": currentPage = new Home(); break;
         case "addMenu": currentPage = new AddMenu(); break;
         case "createAccount": currentPage = new CreateAccount(); break;
+        case "createIncome": currentPage = new CreateIncome(); break;
     }
     console.timeEnd("change page");
 }

src/views/js/pages/AddMenu.js

@@ -14,5 +14,11 @@ export default class AddMenu extends Page{
             .addClass("button")
             .onclick(()=>{changePage("createAccount")})
             .appendTo(this.container);
+
+        new Elem("button")
+            .text("New Income")
+            .addClass("button")
+            .onclick(()=>{changePage("createIncome")})
+            .appendTo(this.container);
     }
 }

src/views/js/pages/CreateAccount.js

@@ -83,6 +83,7 @@ export default class CreateAccount extends Page{
             .append(new Elem("button")
                 .text("Cancel")
                 .type("button")
+                .addClass("cancel")
                 .onclick(()=>{changePage("home")})
             )
             .appendTo(this.container);

src/views/js/pages/CreateIncome.js

@@ -0,0 +1,55 @@
+import Page from "./Page.js";
+import Elem from "../Elem.js";
+
+export default class CreateIncome extends Page{
+    constructor(){
+        super("CreateIncome");
+
+        this.render();
+    }
+
+    submit(event){
+        event.preventDefault();
+        console.log("submitting");
+    }
+
+    render(){
+        new Elem("form")
+            .addClass("standardForm")
+            .onsubmit(this.submit.bind())
+            .append(new Elem("h1")
+                .text("Create Income")
+            )
+            .append(new Elem("label")
+                .text("Name")
+                .append(new Elem("input")
+                    .type("text")
+                    .addClass("name")
+                    .placeholder("Name")
+                    .required()
+                    .focus()
+                )
+            )
+            .append(new Elem("label")
+                .text("Amount")
+                .append(new Elem("input")
+                    .type("number")
+                    .addClass("amount")
+                    .placeholder("Amount")
+                    .min("0")
+                    .step("0.01")
+                    .required()
+                )
+            )
+            .append(new Elem("button")
+                .text("Create")
+            )
+            .append(new Elem("button")
+                .text("Cancel")
+                .addClass("cancel")
+                .type("button")
+                .onclick(()=>{changePage("home")})
+            )
+            .appendTo(this.container);
+    }
+}