Change todo to task and rename some files

lulunac27a · lulunac27a · commit f8285504c6dc · 2024-10-02T19:11:10.000-05:00
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
-# Vue gamification todo list app with Vuex, SCSS, and TypeScript
+# Vue gamification task list app with Vuex, SCSS, and TypeScript
 
-This application is a todo list with task repetition with level and experience points,
+This application is a task list with task repetition with level and experience points,
 and it stores to local storage using `vuex-persistedstate`.
 Try it on Netlify: https://gamification-todo-list-vue-typescript.netlify.app/
 
diff --git a/docs/index.md b/docs/index.md
@@ -1,6 +1,6 @@
-# Vue gamification todo list app with Vuex, SCSS, and TypeScript
+# Vue gamification task list app with Vuex, SCSS, and TypeScript
 
-This application is a todo list with task repetition with level and experience points,
+This application is a task list with task repetition with level and experience points,
 and it stores to local storage using `vuex-persistedstate`.
 Try it on Netlify: https://gamification-todo-list-vue-typescript.netlify.app/
 
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "todo-list-application-typescript",
+  "name": "task-list-application-typescript",
   "version": "1.14.0",
   "private": true,
   "scripts": {
diff --git a/public/index.html b/public/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
-    <title>Gamification Todo List with Vue and TypeScript</title>
+    <title>Gamification Task List with Vue and TypeScript</title>
   </head>
   <body>
     <noscript>
diff --git a/src/App.vue b/src/App.vue
@@ -1,26 +1,26 @@
 <template>
   <img alt="Vue logo" src="./assets/logo.png" />
   <div>
-    <h1>Todo List Application using Vue, TypeScript and Vuex</h1>
+    <h1>Task List Application using Vue, TypeScript and Vuex</h1>
     <p>
       This is a task list application using Vue, TypeScript, and Vuex with SCSS
       styles. It supports gamification like levels and experience points (XP).
     </p>
-    <NewTodo />
-    <TodoList />
+    <NewTask />
+    <TaskList />
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import NewTodo from "./components/NewTodo.vue";
-import TodoList from "./components/TodoList.vue";
+import NewTask from "./components/NewTask.vue";
+import TaskList from "./components/TaskList.vue";
 
 export default defineComponent({
   name: "App",
   components: {
-    NewTodo,
-    TodoList,
+    NewTask,
+    TaskList,
   },
 });
 </script>
diff --git a/src/components/NewTask.vue b/src/components/NewTask.vue
@@ -1,9 +1,9 @@
 <template>
-  <form @submit.prevent="addTodo">
+  <form @submit.prevent="addTask">
     <!--all fields are required in order to add a task-->
     Name:<br /><!--task name can be up to 255 characters in length-->
     <input
-      class="todo-input"
+      class="task-input"
       id="name"
       type="text"
       placeholder="Enter task name"
@@ -13,28 +13,28 @@
     /><br />
     Due date:<br /><!--task due date must be on or after today date-->
     <input
-      class="todo-input"
+      class="task-input"
       id="due-date"
       type="date"
       placeholder="Enter due date"
       v-model="originalDueDate"
       required
     /><br />
     Priority:<br />
-    <select class="todo-input" id="priority" v-model="priority" required>
+    <select class="task-input" id="priority" v-model="priority" required>
       <option value="1">Low</option>
       <option value="2">Medium</option>
       <option value="3">High</option></select
     ><br />
     Difficulty:<br />
-    <select class="todo-input" id="difficulty" v-model="difficulty" required>
+    <select class="task-input" id="difficulty" v-model="difficulty" required>
       <option value="1">Easy</option>
       <option value="2">Medium</option>
       <option value="3">Hard</option></select
     ><br />
     Repeat every:<br />
     <input
-      class="todo-input"
+      class="task-input"
       id="repeat-every"
       type="number"
       placeholder="Enter number of days/weeks/months/years to repeat"
@@ -45,7 +45,7 @@
     /><br />
     Repeat interval:<br />
     <select
-      class="todo-input"
+      class="task-input"
       id="repeat-interval"
       v-model="repeatInterval"
       required
@@ -62,11 +62,11 @@
 
 <script lang="ts">
 import store from "@/store";
-import { Difficulty, Priority, RepeatInterval } from "./TodoList.vue";
+import { Difficulty, Priority, RepeatInterval } from "./TaskList.vue";
 import { defineComponent } from "vue";
 
 export interface TodoTask {
-  //todo task interface
+  //todo task list interface
   task: string; //task name
   dueDate: Date; //task due date
   priority: number; //task priority
@@ -114,9 +114,9 @@ export default defineComponent({
   },
   methods: {
     /**
-     * Add task to todo list when user presses the Add Task button.
+     * Add task to task list when user presses the Add Task button.
      */
-    addTodo: function (): void | TodoTask[] {
+    addTask: function (): void | TodoTask[] {
       this.dueDate = this.originalDueDate; //set task due date to entered task original due date
       store.dispatch("createTask", this);
       this.newId++;
diff --git a/src/components/TaskList.scss b/src/components/TaskList.scss
diff --git a/src/components/TaskList.vue b/src/components/TaskList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="todo-app">
+  <div class="task-list-app">
     <!--task list app content-->
     <p>
       Level:
@@ -60,57 +60,57 @@
       }}</span></ve-progress
     >
     <h3>Task list</h3>
-    <ul class="todos">
+    <ul class="tasks">
       <!--repeat for each tasks-->
-      <li v-for="todo in todos" :key="todo.newId" class="todo">
+      <li v-for="task in getTasks" :key="task.newId" class="task">
         <span
           :class="{
-            overdue: new Date(todo.dueDate + ' 23:59:59.999') < new Date(),
+            overdue: new Date(task.dueDate + ' 23:59:59.999') < new Date(),
           }"
           ><span id="text-numeric-display"
-            >{{ todo.task
+            >{{ task.task
             }}<span
-              v-if="new Date(todo.dueDate + ' 23:59:59.999') < new Date()"
+              v-if="new Date(task.dueDate + ' 23:59:59.999') < new Date()"
             >
               (Overdue)</span
             ></span
           >
           <br />Streak:
           <span id="text-numeric-display">{{
-            todo.streak.toLocaleString("en-US")
+            task.streak.toLocaleString("en-US")
           }}</span>
           <br />Rank:
           <span id="text-numeric-display">{{
-            todo.rank.toLocaleString("en-US")
+            task.rank.toLocaleString("en-US")
           }}</span>
-          <br /><progress max="100" :value="todo.rankProgress"></progress
+          <br /><progress max="100" :value="task.rankProgress"></progress
           ><br />Due date:
-          <span id="text-numeric-display">{{ todo.dueDate }}</span>
+          <span id="text-numeric-display">{{ task.dueDate }}</span>
           <br />Priority:
-          <span id="text-numeric-display">{{ todo.priority }}</span>
+          <span id="text-numeric-display">{{ task.priority }}</span>
           <br />Difficulty:
-          <span id="text-numeric-display">{{ todo.difficulty }}</span>
+          <span id="text-numeric-display">{{ task.difficulty }}</span>
           <br />Repeat:
-          <span v-if="todo.repeatInterval != 5"
+          <span v-if="task.repeatInterval != 5"
             ><span id="text-numeric-display">{{
-              todo.repeatEvery.toLocaleString("en-US")
+              task.repeatEvery.toLocaleString("en-US")
             }}</span></span
-          >&nbsp;<span v-if="todo.repeatInterval == 1">Day</span
-          ><span v-if="todo.repeatInterval == 2">Week</span
-          ><span v-if="todo.repeatInterval == 3">Month</span
-          ><span v-if="todo.repeatInterval == 4">Year</span
-          ><span v-if="todo.repeatInterval == 5">Once</span
-          ><span v-if="todo.repeatEvery > 1 && todo.repeatInterval != 5"
+          >&nbsp;<span v-if="task.repeatInterval == 1">Day</span
+          ><span v-if="task.repeatInterval == 2">Week</span
+          ><span v-if="task.repeatInterval == 3">Month</span
+          ><span v-if="task.repeatInterval == 4">Year</span
+          ><span v-if="task.repeatInterval == 5">Once</span
+          ><span v-if="task.repeatEvery > 1 && task.repeatInterval != 5"
             >s</span
           ></span
         >
         <!--don't show complete button if one-time task is completed--><button
-          v-if="!todo.isCompleted"
-          @click="completeTodo(todo.newId)"
+          v-if="!task.isCompleted"
+          @click="completeTask(task.newId)"
         >
           Complete
         </button>
-        <button @click="deleteTodo(todo.newId)">Delete</button><br />
+        <button @click="deleteTask(task.newId)">Delete</button><br />
       </li>
     </ul>
   </div>
@@ -138,7 +138,7 @@ export enum Priority {
   High = 3,
 }
 export default defineComponent({
-  name: "TodoList",
+  name: "TaskList",
   props: {
     newId: Number,
     tasks: Array,
@@ -160,11 +160,11 @@ export default defineComponent({
     originalDueDate: Date,
   },
   computed: {
-    todos() {
+    getTasks() {
       //eslint-disable-next-line
-      return store.getters.getTodos.sort((a: any, b: any) =>
+      return store.getters.getTasks.sort((a: any, b: any) =>
         a.dueDate.localeCompare(b.dueDate),
-      ); //get tasks (todos) and sort tasks by task's due date with the top one the oldest
+      ); //get list of tasks (todos) and sort tasks by task's due date with the top one the oldest
     },
     getCurrentLevel() {
       return store.getters.getLevel; //get current level
@@ -202,19 +202,19 @@ export default defineComponent({
      * Complete task based on task ID.
      * @param id task ID
      */
-    completeTodo: function (id: number): void {
+    completeTask: function (id: number): void {
       store.dispatch("completeTask", id);
     },
     /**
      * Delete task based on task ID.
      * @param id task ID
      */
-    deleteTodo: function (id: number): void {
+    deleteTask: function (id: number): void {
       store.dispatch("deleteTask", id);
     },
   },
 });
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<link scoped lang="scss" src="./TodoList.scss" />
+<link scoped lang="scss" src="./TaskList.scss" />
diff --git a/src/main.ts b/src/main.ts
@@ -18,7 +18,7 @@ store.dispatch("loadUser").then(
     console.log("User data failed to load.");
   },
 ); //load user data
-store.dispatch("loadTodos").then(
+store.dispatch("loadTasks").then(
   (success) => {
     //if task list data is loaded successfully
     console.log("Task list data loaded successfully!");
diff --git a/src/store/index.ts b/src/store/index.ts

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "name": "todo-list-application-typescript",`
	`2`	`+ "name": "task-list-application-typescript",`
`3`	`3`	`"version": "1.14.0",`
`4`	`4`	`"private": true,`
`5`	`5`	`"scripts": {`