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 {
+.incompleteWorkout:hover {
-    background-color: rgb(211, 211, 211);
+    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')
+        }
+    }
 }

src/app/models/plan.model.ts

@@ -11,5 +11,6 @@ export interface Plan {
 
 export interface Week {
     week: number,
+    totalMilage: number,
     workouts: Workout[]
 }

src/app/testData/examplePlan.ts

@@ -10,6 +10,7 @@ export const examplePlan: Plan = {
     planDetials: [
         {
             week: 1,
+            totalMilage: 31,
             workouts: [
                 {
                     day: 0,
@@ -57,6 +58,7 @@ export const examplePlan: Plan = {
         },
         {
             week: 2,
+            totalMilage: 33,
             workouts: [
                 {
                     day: 0,
@@ -104,6 +106,7 @@ export const examplePlan: Plan = {
         },
         {
             week: 3,
+            totalMilage: 39,
             workouts: [
                 {
                     day: 0,
@@ -151,6 +154,7 @@ export const examplePlan: Plan = {
         },
         {
             week: 4,
+            totalMilage: 40,
             workouts: [
                 {
                     day: 0,
@@ -198,6 +202,7 @@ export const examplePlan: Plan = {
         },
         {
             week: 5,
+            totalMilage: 42,
             workouts: [
                 {
                     day: 0,
@@ -245,6 +250,7 @@ export const examplePlan: Plan = {
         },
         {
             week: 6,
+            totalMilage: 33,
             workouts: [
                 {
                     day: 0,
@@ -292,6 +298,7 @@ export const examplePlan: Plan = {
         },
         {
             week: 7,
+            totalMilage: 48,
             workouts: [
                 {
                     day: 0,
@@ -339,6 +346,7 @@ export const examplePlan: Plan = {
         },
         {
             week: 8,
+            totalMilage: 51,
             workouts: [
                 {
                     day: 0,
@@ -386,6 +394,7 @@ export const examplePlan: Plan = {
         },
         {
             week: 9,
+            totalMilage: 46,
             workouts: [
                 {
                     day: 0,
@@ -433,6 +442,7 @@ export const examplePlan: Plan = {
         },
         {
             week: 10,
+            totalMilage: 40,
             workouts: [
                 {
                     day: 0,
@@ -480,6 +490,7 @@ export const examplePlan: Plan = {
         },
         {
             week: 11,
+            totalMilage: 52,
             workouts: [
                 {
                     day: 0,
@@ -527,6 +538,7 @@ export const examplePlan: Plan = {
         },
         {
             week: 12,
+            totalMilage: 48,
             workouts: [
                 {
                     day: 0,
@@ -574,6 +586,7 @@ export const examplePlan: Plan = {
         },
         {
             week: 13,
+            totalMilage: 48,
             workouts: [
                 {
                     day: 0,
@@ -621,6 +634,7 @@ export const examplePlan: Plan = {
         },
         {
             week: 14,
+            totalMilage: 48,
             workouts: [
                 {
                     day: 0,
@@ -668,6 +682,7 @@ export const examplePlan: Plan = {
         },
         {
             week: 15,
+            totalMilage: 49,
             workouts: [
                 {
                     day: 0,
@@ -715,6 +730,7 @@ export const examplePlan: Plan = {
         },
         {
             week: 16,
+            totalMilage: 41,
             workouts: [
                 {
                     day: 0,
@@ -762,6 +778,7 @@ export const examplePlan: Plan = {
         },
         {
             week: 17,
+            totalMilage: 31,
             workouts: [
                 {
                     day: 0,
@@ -809,6 +826,7 @@ export const examplePlan: Plan = {
         },
         {
             week: 18,
+            totalMilage: 16,
             workouts: [
                 {
                     day: 0,