Create basics of the new workout page.

views/css/home.css

@@ -0,0 +1,9 @@
+#home{
+    position: relative;
+}
+
+#homeNewWorkout{
+    position: absolute;
+    top: 15px;
+    right: 15px;
+}

views/css/newWorkout.css

@@ -0,0 +1,9 @@
+#newWorkoutPage{
+    position: relative;
+}
+
+#newWorkoutBack{
+    position: absolute;
+    top: 15px;
+    right: 15px;
+}

views/index.css

@@ -1,5 +1,7 @@
 @import "./css/register.css";
 @import "./css/login.css";
+@import "./css/home.css";
+@import "./css/newWorkout.css";
 
 :root{
     --primary: #d7263d;
@@ -94,3 +96,16 @@
     cursor: pointer;
     text-decoration: underline;
 }
+
+.button{
+    background: none;
+    border-radius: 15px;
+    border: 2px solid var(--accent);
+    padding: 5px 25px;
+    font-size: 22px;
+    cursor: pointer;
+}
+
+.button:active{
+    background: var(--gray);
+}

views/index.html

@@ -91,6 +91,18 @@
     <div id="homePage" class="page">
         <h1>Home Page</h1>
         <button id="homeLogout" class="link">Log Out</button>
+        <button id="homeNewWorkout" class="button">+ Workout</button>
+    </div>
+
+    <div id="newWorkoutPage" class="page">
+        <button id="newWorkoutBack" class="button">Cancel</button>
+        <label>Name of Workout:
+            <input
+                id="newWorkoutName"
+                type="name"
+                placeholder="Name"
+            >
+        </label>
     </div>
 
     <script src="/index.js"></script>

views/index.js

@@ -1,6 +1,7 @@
 import registerPage from "./js/pages/register.js";
 import loginPage from "./js/pages/login.js";
 import homePage from "./js/pages/home.js";
+import newWorkoutPage from "./js/pages/newWorkout.js";
 
 const notifier = document.getElementById("notifier");
 const pageElements = document.querySelectorAll(".page");
@@ -28,5 +29,6 @@ window.changePage = (page, data)=>{
         case "login": loginPage.render(); break;
         case "register": registerPage.render(); break;
         case "home": homePage.render(); break;
+        case "newWorkout": newWorkoutPage.render();
     }
 }

views/js/pages/home.js

@@ -22,6 +22,10 @@ export default {
                 .catch((err)=>{
                     notify("error", "Something went wrong, try refreshing the page");
                 });
-        })
+        });
+
+        document.getElementById("homeNewWorkout").addEventListener("click", ()=>{
+            changePage("newWorkout");
+        });
     }
 }

views/js/pages/newWorkout.js

@@ -0,0 +1,16 @@
+export default {
+    rendered: false,
+    
+    render: function(){
+        if(!this.rendered){
+            this.buttons();
+            this.rendered = true;
+        }
+    },
+
+    buttons: function(){
+        document.getElementById("newWorkoutBack").addEventListener("click", ()=>{
+            changePage("home");
+        });
+    }
+}