From da0c4e925d0baac1735c3d8da30cb340fcc915b7 Mon Sep 17 00:00:00 2001 From: marcgauch <34353267+marcgauch@users.noreply.github.com> Date: Thu, 12 Jan 2023 22:22:43 +0100 Subject: [PATCH] Todo with ugly af filter --- session-1/my-fancy-to-do-with-search/app.js | 43 +++++++++++ .../my-fancy-to-do-with-search/index.html | 72 +++++++++++++++++++ .../my-fancy-to-do-with-search/styles.css | 67 +++++++++++++++++ 3 files changed, 182 insertions(+) create mode 100644 session-1/my-fancy-to-do-with-search/app.js create mode 100644 session-1/my-fancy-to-do-with-search/index.html create mode 100644 session-1/my-fancy-to-do-with-search/styles.css diff --git a/session-1/my-fancy-to-do-with-search/app.js b/session-1/my-fancy-to-do-with-search/app.js new file mode 100644 index 0000000..5a73679 --- /dev/null +++ b/session-1/my-fancy-to-do-with-search/app.js @@ -0,0 +1,43 @@ +const app = Vue.createApp({ + data: () => ({ + inputValue: "", + items: [ + {name: "aaa1", done: false}, + {name: "bbb2", done: true}, + {name: "ccc3", done: false} + ], + toggle: false, + searchString: "" + }), + methods: { + addToList () { + //this.items.push(this.inputValue) // nicht mehr brauchbar, da wir jetzt ein objekt haben + this.items.push({name: this.inputValue, done: false}) + this.inputValue = "" //löscht das inputfeld wieder + }, + deleteAll() { + this.items = [] + }, + deleteItem(index){ + //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice + this.items.splice(index, 1) // mit (index, 2) löscht es zwei elemente + } + }, + computed: { + filteredElements () { + return this.items.filter(e => e.name.includes(this.searchString)) + }, + totalCompletedTasks() { + let count = 0; + for (let i = 0; i < this.items.length; i++){ + if (this.items[i].done){ + count++ + } + } + return count; + } + } + }); + + app.mount("#app"); + \ No newline at end of file diff --git a/session-1/my-fancy-to-do-with-search/index.html b/session-1/my-fancy-to-do-with-search/index.html new file mode 100644 index 0000000..1d49eba --- /dev/null +++ b/session-1/my-fancy-to-do-with-search/index.html @@ -0,0 +1,72 @@ + + +
+ + +