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 @@ + + + + + + TITLE + + + + + + + +
+ + Anzahl erledigter Tasks: {{totalCompletedTasks}}
+ + +
+ + +
+ + diff --git a/session-1/my-fancy-to-do-with-search/styles.css b/session-1/my-fancy-to-do-with-search/styles.css new file mode 100644 index 0000000..da9b0dd --- /dev/null +++ b/session-1/my-fancy-to-do-with-search/styles.css @@ -0,0 +1,67 @@ +* { + box-sizing: border-box; + } + + html { + font-family: 'Jost', sans-serif; + } + + body { + margin: 0; + } + + section { + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26); + margin: 3rem; + border-radius: 10px; + padding: 1rem; + text-align: center; + } + + h2 { + font-size: 2rem; + border-bottom: 4px solid #ccc; + color: #970076; + margin: 0 0 1rem 0; + } + + p { + font-size: 1.25rem; + font-weight: bold; + background-color: #970076; + padding: 0.5rem; + color: white; + border-radius: 25px; + } + + input { + font: inherit; + border: 1px solid #ccc; + } + + input:focus { + outline: none; + border-color: #1b995e; + background-color: #d7fdeb; + } + + button { + font: inherit; + cursor: pointer; + border: 1px solid #ff0077; + background-color: #ff0077; + color: white; + padding: 0.05rem 1rem; + box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26); + } + + button:hover, + button:active { + background-color: #ec3169; + border-color: #ec3169; + box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26); + } + + .ich-bin-durchgestrichen { + text-decoration: line-through; + } \ No newline at end of file