Added some comments and also added number of task completions

Author: lulunac27a

src/components/NewTodo.vue

@@ -1,5 +1,6 @@
 <template>
   <form @submit.prevent="addTodo">
+    <!--all fields are required-->
     Name:<br />
     <input
       class="todo-input"
@@ -9,7 +10,7 @@
       v-model="task"
       required
     /><br />
-    Due date:<br />
+    Due date:<br /><!--task due date must be on or after today date-->
     <input
       class="todo-input"
       id="dueDate"
@@ -71,6 +72,7 @@ export interface todoTask {
   repeatFrequency: number;
   newId: number;
   completed: boolean;
+  timesCompleted: number;
 }
 const currentUtcDate: Date = new Date();
 const currentLocalDate: Date = new Date(
@@ -89,7 +91,8 @@ export default defineComponent({
       repeatOften: 1,
       repeatFrequency: repeatFrequency.Once, //set default task repetition to one-time
       newId: 0, //initial id is 0
-      completed: false,
+      completed: false, //task not completed if task is created
+      timesCompleted: 0,
     };
   },
   mounted() {
@@ -107,6 +110,7 @@ export default defineComponent({
       this.repeatOften = 1;
       this.repeatFrequency = repeatFrequency.Once;
       this.completed = false;
+      this.timesCompleted = 0;
     },
   },
 });

src/components/TodoList.vue

@@ -5,15 +5,21 @@
     <br />
     <p>XP: {{ xps }}</p>
     <br />
-    <ve-progress :progress="progresses">Level {{ levels }}</ve-progress>
+    <!--show circular progress bar filled with level progress--><ve-progress
+      :progress="progresses"
+      >Level {{ levels }}</ve-progress
+    >
     <ul class="todos">
+      <!--repeat for each tasks-->
       <li v-for="todo in todos" :key="todo.newId" class="todo">
         <span
           v-bind:class="{
             overdue: new Date(todo.dueDate + ' 23:59:59.999') < new Date(),
           }"
-          >{{ todo.task }}: Due {{ todo.dueDate }} Priority:
-          {{ todo.priority }} Difficulty: {{ todo.difficulty }} Repeat:
+          >{{ todo.task }}: Due {{ todo.dueDate }} Priority:{{
+            todo.priority
+          }}
+          Difficulty: {{ todo.difficulty }} Repeat:
           <span v-if="todo.repeatFrequency != 5">{{ todo.repeatOften }}</span
           >&nbsp;<span v-if="todo.repeatFrequency == 1">Day</span
           ><span v-if="todo.repeatFrequency == 2">Week</span
@@ -24,7 +30,12 @@
             >s</span
           ></span
         >
-        <button @click="completeTodo(todo.newId)">Complete</button>
+        <!--don't show if one-time task is completed--><button
+          v-if="!todo.completed"
+          @click="completeTodo(todo.newId)"
+        >
+          Complete
+        </button>
         <button @click="deleteTodo(todo.newId)">Delete</button><br />
       </li>
     </ul>
@@ -66,6 +77,7 @@ export default defineComponent({
     level: Number,
     xp: Number,
     completed: Boolean,
+    timesCompleted: Number,
   },
   computed: {
     todos() {

src/store/index.ts

@@ -91,14 +91,19 @@ export default createStore({
         completed: payload.completed as boolean,
         repeatOften: payload.repeatOften as number,
         repeatFrequency: payload.repeatFrequency as number,
+        timesCompleted: payload.timesCompleted as number,
       };
       state.todos.unshift(createTask);
     },
     complete_Todo: (state, payload) => {
       const item = state.todos.find(
         (todo: { newId: number }) => todo.newId === payload
       );
-      item.completed = !item.completed; //complete task item
+      if (item.repeatFrequency == 5) {
+        item.completed = !item.completed; //complete task item
+      } else {
+        item.timesCompleted++; //increment number of times task has been completed by 1
+      }
     },
     delete_Todo: (state, payload) => {
       const index = state.todos.findIndex(