todolist using vuejs

todolist
Computerization · Dec 26, 2020 · 3cb8a69 · 3cb8a69
1 parent 4b59295
commit 3cb8a69
Show file tree

Hide file tree

Showing 3 changed files with 154 additions and 0 deletions.
diff --git a/2020/yhr/Todolist/css/main.css b/2020/yhr/Todolist/css/main.css
@@ -0,0 +1,69 @@
+html,
+body {
+    margin: 0;
+    padding: 0;
+    font-size: large;
+    text-align: center;
+    font-family: Arial, Helvetica, sans-serif;
+    width: 100%;
+    height: 100%;
+}
+
+.titlecontainer {
+    z-index: 2;
+    padding: 15px;
+    position: fixed;
+    width: 100%;
+    background-color: white;
+    height: 60px;
+    box-shadow: 0 0 0 1px hsla(0, 0%, 100%, .3) inset, 0 0.5em 1em rgba(0, 0, 0, 0.6);
+    text-shadow: 0 1px 1px hsla(0, 0%, 100%, .3);
+}
+
+.main {
+    position: absolute;
+    width: 80%;
+    top: 125px;
+    left: 10%;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.containerh {
+    color: white;
+    background-color: rgb(45, 68, 82);
+}
+
+table,
+tbody {
+    border: 0px solid black;
+}
+
+table,
+tbody,
+td {
+    height: 50px;
+}
+
+input {
+    width: 80%;
+    height: 10px;
+    font-size: large;
+    border-radius: 10px;
+    margin: 0px;
+    padding: 10px 15px;
+    background-color: rgba(0, 0, 0, 0);
+    border: 1px solid rgba(0, 0, 0, 1);
+}
+
+button {
+    width: 80%;
+    height: 80%;
+    border-radius: 10px;
+    color: white;
+    font-size: large;
+    background-color: rgb(45, 68, 82);
+}
diff --git a/2020/yhr/Todolist/index.html b/2020/yhr/Todolist/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+        <link rel="stylesheet" type="text/css" href="css/main.css"/>
+        <meta charset="UTF-8">
+        <title>To do list</title>
+    <head>
+    <body>
+        <div class="titlecontainer">
+            <h1>· Todolist ·</h1>
+        </div>
+        <div class="main" id="app">
+            <table>
+                <thead class="containerh">
+                    <tr>
+                        <th width="50%">To do</th>
+                        <th width="20%">Deadline</th>
+                        <th width="15%">Finished</th>
+                        <th width="15%">Delete</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <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 v-on:click="deleted(index)">Delete</button></td>
+                    </tr>
+                </tbody>
+                <tfoot class="containerf">
+                    <td><input width="100%" v-model="ntodo.name"></td>
+                    <td><input v-model="ntodo.ddl"></td>
+                    <td colspan="2"><button v-on:click="add">Add</button></td>
+                </tfoot>
+            </table>
+        </div>
+        <script src="js/main.js"></script>
+    </body>
+</html>
diff --git a/2020/yhr/Todolist/js/main.js b/2020/yhr/Todolist/js/main.js
@@ -0,0 +1,45 @@
+var app = new Vue({
+    el: '#app',
+    data: {
+        todos: [],
+        ntodo: {
+            name: "",
+            ddl: "",
+            finished: "Unfinished"
+        }
+    },
+    methods: {
+        add: function() {
+            this.todos.push(this.ntodo);
+            this.ntodo = {
+                name: "",
+                ddl: "",
+                finished: "Unfinished"
+            };
+        },
+        change: function(i) {
+            if (this.todos[i].finished == "Finished")
+                this.todos[i].finished = "Unfinished";
+            else
+                this.todos[i].finished = "Finished";
+        },
+        deleted: function(i) {
+            this.todos.splice(i, 1);
+        },
+        loadComments() {
+            var list = localStorage.getItem("todos");
+            this.todos = list;
+        }
+    },
+    created: function() {
+        var tmp = JSON.parse(localStorage.getItem('todos'));
+        if (tmp != null) {
+            this.todos = tmp;
+        }
+        add();
+    },
+    updated: function() {
+        console.log("updated!");
+        localStorage.setItem('todos', JSON.stringify(this.todos));
+    }
+})