Add style for the edit workout exercises.

views/css/editWorkout.css

@@ -1,3 +1,63 @@
 #editWorkoutPage{
     flex-direction: column;
 }
+
+#editWorkoutExercises{
+    width: 100%;
+}
+
+.editWorkoutExercise{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 5px;
+    height: 75px;
+    width: 100%;
+    max-width: 550px;
+    border-radius: 5px;
+    border: 2px solid white;
+    margin: 15px 0;
+}
+
+.workoutMove{
+    display: flex;
+    flex-direction: column;
+    flex-basis: 40px;
+    flex-grow: 0;
+}
+
+.workoutMove button{
+    background: linear-gradient(to right, var(--accent), var(--primary), var(--accent));
+    cursor: pointer;
+    border: none;
+    background-clip: text;
+    color: transparent;
+    font-size: 40px;
+    line-height: 35px;
+}
+
+.editWorkoutExercise p{
+    font-size: 25px;
+    flex-basis: 40px;
+    flex-grow: 1;
+    text-align: center;
+}
+
+.editWorkoutDelete{
+    background: linear-gradient(to right, var(--accent), var(--primary));
+    border: none;
+    font-size: 22px;
+    border-radius: 50%;
+    height: 35px;
+    width: 35px;
+    flex-basis: 35px;
+    flex-grow: 0;
+    cursor: pointer;
+    color: var(--dark);
+}
+
+#editWorkoutBack{
+    width: 100%;
+    max-width: 550px;
+    padding: 15px 0;
+}

views/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="theme-color" content="#1a1a1a">
-    <meta name="description" conent="Minimalistic application for logging, tracking, monitoring and improving your workouts">
+    <meta name="description" content="Minimalistic application for logging, tracking, monitoring and improving your workouts">
     <title>Workout Tracker</title>
     <link rel="stylesheet" href="/index.css">
     <link rel="icon" href="/logo.svg" type="image/svg+xml">
@@ -185,7 +185,12 @@
 
         <template id="editWorkoutExercise">
             <div class="editWorkoutExercise">
+                <div class="workoutMove">
+                    <button class="workoutMoveUp" aria-label="Move up">&#9650;</button>
+                    <button class="workoutMoveDown" aria-label="Move down">&#9660;</button>
+                </div>
                 <p></p>
+                <button class="editWorkoutDelete" aria-label="Delete">X</button>
             </div>
         </template>
     </div>

views/js/pages/editWorkout.js

@@ -4,6 +4,7 @@ export default {
     render: function(workout){
         document.querySelector("#editWorkoutPage h1").textContent = workout.name;
         this.displayExercises(workout.exercises);
+
         if(!this.rendered){
             this.buttons();
             this.rendered = true;