From 3cb8a69c3b9db88316af678d85d1a47106a91da3 Mon Sep 17 00:00:00 2001 From: Bobby Yang <54178753+Lazenander@users.noreply.github.com> Date: Sat, 26 Dec 2020 15:10:59 +0800 Subject: [PATCH] todolist using vuejs todolist --- 2020/yhr/Todolist/css/main.css | 69 ++++++++++++++++++++++++++++++++++ 2020/yhr/Todolist/index.html | 40 ++++++++++++++++++++ 2020/yhr/Todolist/js/main.js | 45 ++++++++++++++++++++++ 3 files changed, 154 insertions(+) create mode 100644 2020/yhr/Todolist/css/main.css create mode 100644 2020/yhr/Todolist/index.html create mode 100644 2020/yhr/Todolist/js/main.js diff --git a/2020/yhr/Todolist/css/main.css b/2020/yhr/Todolist/css/main.css new file mode 100644 index 0000000..eb0ba2f --- /dev/null +++ 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); +} \ No newline at end of file diff --git a/2020/yhr/Todolist/index.html b/2020/yhr/Todolist/index.html new file mode 100644 index 0000000..d326a7b --- /dev/null +++ b/2020/yhr/Todolist/index.html @@ -0,0 +1,40 @@ + + + + + + + To do list + + +
+

· Todolist ·

+
+
+ + + + + + + + + + + + + + + + + + + + + + +
To doDeadlineFinishedDelete
{{ todo.name }}{{ todo.ddl }}
+
+ + + \ No newline at end of file diff --git a/2020/yhr/Todolist/js/main.js b/2020/yhr/Todolist/js/main.js new file mode 100644 index 0000000..e5eb5e6 --- /dev/null +++ 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)); + } +}) \ No newline at end of file