Add functionality for adding exercises to a workout.

views/css/editWorkout.css

@@ -1,5 +1,12 @@
 #editWorkoutPage{
     flex-direction: column;
+    position: relative;
+}
+
+#editWorkoutAddExercise{
+    position: absolute;
+    top: 5px;
+    right: 5px;
 }
 
 #editWorkoutExercises{
@@ -56,6 +63,28 @@
     color: var(--dark);
 }
 
+#newExerciseInput{
+    font-size: 22px;
+    color: var(--gray);
+    padding-left: 5px;
+}
+
+#newExerciseContainer{
+    width: 100%;
+    max-width: 550px;
+    margin-bottom: 25px;
+}
+
+#newExerciseSubmit{
+    border: none;
+    background: linear-gradient(to right, var(--accent), var(--primary));
+    background-clip: text;
+    color: transparent;
+    font-size: 40px;
+    font-weight: bold;
+    margin-left: 15px;
+}
+
 #editWorkoutBack{
     width: 100%;
     max-width: 550px;

views/index.html

@@ -177,10 +177,26 @@
     </div>
 
     <div id="editWorkoutPage" class="page" style="display:none">
+        <button
+            id="editWorkoutAddExercise"
+            aria-label="Add Exercise"
+            class="button"
+        >+ Exercise</button>
+
         <h1></h1>
 
         <div id="editWorkoutExercises"></div>
 
+        <div id="newExerciseContainer" style="display:none">
+            <input
+                id="newExerciseInput"
+                type="text"
+                placeholder="New Exercise"
+            />
+
+            <button id="newExerciseSubmit">&#10003;</button>
+        </div>
+
         <button id="editWorkoutBack" class="button">Cancel</button>
 
         <template id="editWorkoutExercise">

views/js/pages/editWorkout.js

@@ -13,6 +13,12 @@ export default {
 
     buttons: function(){
         document.getElementById("editWorkoutBack").addEventListener("click", ()=>{changePage("home")});
+        document.getElementById("editWorkoutAddExercise").addEventListener("click", ()=>{
+            const container = document.getElementById("newExerciseContainer");
+            container.style.display = "flex";
+            container.querySelector("input").focus();
+        });
+        document.getElementById("newExerciseSubmit").addEventListener("click", this.addExercise.bind(this));
     },
 
     displayExercises: function(exercises){
@@ -44,5 +50,26 @@ export default {
         }else{
             elem.parentElement.insertBefore(otherElem, elem);
         }
+    },
+
+    addExercise: function(){
+        const container = document.getElementById("editWorkoutExercises");
+        const template = document.getElementById("editWorkoutExercise").content.children[0];
+        const input = document.getElementById("newExerciseInput");
+
+        const exercise = template.cloneNode(true);
+        exercise.querySelector("p").textContent = input.value;
+        exercise.querySelector(".editWorkoutDelete").addEventListener("click", ()=>{
+            container.removeChild(exercise);
+        });
+        exercise.querySelector(".workoutMoveUp").addEventListener("click", (e)=>{
+            this.moveExercise(e.target.parentElement.parentElement, true);
+        });
+        exercise.querySelector(".workoutMoveDown").addEventListener("click", (e)=>{
+            this.moveExercise(e.target.parentElement.parentElement, true);
+        });
+        container.appendChild(exercise);
+
+        input.value = "";
     }
 }