Add overdue class and styles and add more details of each task

Author: lulunac27a

src/components/TodoList.scss

@@ -14,3 +14,7 @@ li {
 a {
   color: #42b983;
 }
+.overdue {
+  color: red;
+  font-weight: bold;
+}

src/components/TodoList.vue

@@ -5,7 +5,7 @@
     <p>XP: {{ xps }}</p><br/>
     <ul class="todos">
       <li v-for="todo in todos" :key="todo.newId" class="todo">
-        {{ todo.task }}
+        <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: <span v-if="todo.repeatFrequency != 5">{{ todo.repeatOften }}</span> <span v-if="todo.repeatFrequency == 1">Day</span><span v-if="todo.repeatFrequency == 2">Week</span><span v-if="todo.repeatFrequency == 3">Month</span><span v-if="todo.repeatFrequency == 4">Year</span><span v-if="todo.repeatFrequency == 5">Once</span><span v-if="todo.repeatOften > 1">s</span></span>
         <button @click="completeTodo(todo.newId)">Complete</button>
         <button @click="deleteTodo(todo.newId)">Delete</button><br/>
       </li>

src/store/index.ts

@@ -30,7 +30,9 @@ export default createStore({
         priority: payload.priority as number,
         difficulty: payload.difficulty as number,
         xp: payload.xp as number,
-        completed: payload.completed as boolean
+        completed: payload.completed as boolean,
+        repeatOften: payload.repeatOften as number,
+        repeatFrequency: payload.repeatFrequency as number
       };
       state.todos.unshift(createTask);
     },