Merge pull request #56 from Computerization/HaoranYang

yhr's todolist - final version
Computerization · Jan 15, 2021 · 34db55b · 34db55b
2 parents f210ce8 + 576695b
commit 34db55b
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 12 deletions.
diff --git a/2020/yhr/Todolist/css/main.css b/2020/yhr/Todolist/css/main.css
@@ -66,4 +66,5 @@ button {
     color: white;
     font-size: large;
     background-color: rgb(45, 68, 82);
+    border: none;
 }
diff --git a/2020/yhr/Todolist/index.html b/2020/yhr/Todolist/index.html
@@ -24,13 +24,13 @@ <h1>· Todolist ·</h1>
                     <tr v-for="(todo,index) in todos">
                         <td>{{ todo.name }}</td>
                         <td>{{ todo.ddl }}</td>
-                        <td><button v-on:click="change(index)">{{ todo.finished }}</button></td>
+                        <td><button :style="todo.style" v-on:click="change(index)">{{ todo.finished }}</button></td>
                         <td><button v-on:click="deleted(index)">Delete</button></td>
                     </tr>
                 </tbody>
-                <tfoot class="containerf">
+                <tfoot>
                     <td><input width="100%" v-model="ntodo.name"></td>
-                    <td><input v-model="ntodo.ddl"></td>
+                    <td><input type="date" v-model="ntodo.ddl"></td>
                     <td colspan="2"><button v-on:click="add">Add</button></td>
                 </tfoot>
             </table>

diff --git a/2020/yhr/Todolist/js/main.js b/2020/yhr/Todolist/js/main.js
@@ -1,27 +1,37 @@
+// @ts-ignore
 var app = new Vue({
     el: '#app',
     data: {
         todos: [],
         ntodo: {
             name: "",
             ddl: "",
-            finished: "Unfinished"
+            finished: "Unfinished",
+            style: "background-color: red"
         }
     },
     methods: {
         add: function() {
-            this.todos.push(this.ntodo);
-            this.ntodo = {
-                name: "",
-                ddl: "",
-                finished: "Unfinished"
-            };
+            // @ts-ignore
+            if (this.ntodo.name && this.ntodo.ddl) {
+                // @ts-ignore
+                this.todos.push(this.ntodo);
+                this.ntodo = {
+                    name: "",
+                    ddl: "",
+                    finished: "Unfinished",
+                    style: "background-color: red"
+                };
+            }
         },
         change: function(i) {
-            if (this.todos[i].finished == "Finished")
+            if (this.todos[i].finished == "Finished") {
+                this.todos[i].style = "background-color: red";
                 this.todos[i].finished = "Unfinished";
-            else
+            } else {
+                this.todos[i].style = "background-color: green";
                 this.todos[i].finished = "Finished";
+            }
         },
         deleted: function(i) {
             this.todos.splice(i, 1);
@@ -36,6 +46,7 @@ var app = new Vue({
         if (tmp != null) {
             this.todos = tmp;
         }
+        // @ts-ignore
         add();
     },
     updated: function() {