Create the workout menu page.

views/css/workoutMenu.css

@@ -0,0 +1,20 @@
+#workoutMenuPage{
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+#workoutMenuTitle{
+    text-decoration: underline;
+}
+
+.workoutMenuButtons{
+    width: 100%;
+    margin-top: 35px;
+}
+
+#workoutMenuPage button{
+    width: 100%;
+    padding: 15px 0;
+    margin: 15px 0;
+}

views/index.css

@@ -1,6 +1,7 @@
 @import "./css/register.css";
 @import "./css/login.css";
 @import "./css/home.css";
+@import "./css/workoutMenu.css";
 @import "./css/newWorkout.css";
 @import "./css/session.css";
 

views/index.html

@@ -121,6 +121,14 @@
         <button id="newWorkoutFinish" class="button">Create Workout</button>
     </div>
 
+    <div id="workoutMenuPage", class="page">
+        <h1 id="workoutMenuTitle"></h1>
+        <div class="workoutMenuButtons">
+            <button id="menuStartWorkout" class="button">Start Workout</button>
+            <button id="menuReturnHome" class="button">Back</button>
+        </div>
+    </div>
+
     <div id="sessionPage" class="page">
         <div id="previousSession"></div>
 

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 workoutMenuPage from "./js/pages/workoutMenu.js";
 import newWorkoutPage from "./js/pages/newWorkout.js";
 import sessionPage from "./js/pages/session.js";
 
@@ -32,5 +33,6 @@ window.changePage = (page, data)=>{
         case "home": homePage.render(data); break;
         case "newWorkout": newWorkoutPage.render();
         case "session": sessionPage.render(data); break;
+        case "workoutMenu": workoutMenuPage.render(data); break;
     }
 }

views/js/pages/home.js

@@ -68,7 +68,7 @@ export default {
         button.classList.add("button");
         button.textContent = workout.name;
         button.addEventListener("click", ()=>{
-            changePage("session", workout);
+            changePage("workoutMenu", workout);
         });
         this.workoutList.appendChild(button);
     }

views/js/pages/workoutMenu.js

@@ -0,0 +1,16 @@
+export default {
+    render: function(workout){
+        document.getElementById("workoutMenuTitle").textContent = workout.name;
+        this.buttons(workout);
+    },
+
+    buttons: function(workout){
+        document.getElementById("menuStartWorkout").addEventListener("click", ()=>{
+            changePage("session", workout);
+        });
+
+        document.getElementById("menuReturnHome").addEventListener("click", ()=>{
+            changePage("home");
+        });
+    }
+}