adding complete and undo-complete on click

src/app/calendar/calendar.component.html

@@ -17,13 +17,13 @@
                 <div>Week {{planWeek.week}}</div>
             </td>
             @for (workout of planWeek.workouts; track $index) {
-            <td class="hoverOverWorkout">
+            <td class="incompleteWorkout" (click)="onCellClick($event)">
                 <div>{{workout.type}}</div>
                 <div>{{workout.totalDistance == 0 ? '' : workout.totalDistance + ' miles'}}</div>
                 <div>{{workout.description}}</div>
             </td>
             }
-            <td>43</td>
+            <td>{{planWeek.totalMilage}}</td>
         </tr>
         }
     </table>

src/app/calendar/calendar.component.scss

@@ -33,7 +33,13 @@ td {
                                 supported by Chrome, Edge, Opera and Firefox */
 }
 
-.hoverOverWorkout:hover {
-    background-color: rgb(211, 211, 211);
+.incompleteWorkout:hover {
+    background-color: rgb(235, 235, 235);
 }
 
+.completedWorkout {
+    background-color: rgb(107, 194, 107);
+}
+.completedWorkout:hover {
+    background-color: rgb(89, 161, 89);
+}

src/app/calendar/calendar.component.ts

@@ -15,4 +15,13 @@ export class CalendarComponent {
     ngOnInit(): void {
         
     }
+
+    onCellClick(event: Event) {
+        const target = event.currentTarget as HTMLElement;
+        if (target.classList.contains('incompleteWorkout')) {
+            target.classList.replace('incompleteWorkout', 'completedWorkout')
+        } else if (target.classList.contains('completedWorkout')) {
+            target.classList.replace('completedWorkout', 'incompleteWorkout')
+        }
+    }
 }