From bd2d65990a56f1bb934a25bca4757d4260db4c66 Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@2li.ch>
Date: Wed, 20 Jan 2021 19:41:17 +0100
Subject: [PATCH] add my solution for assignment 5

---
 lists-cond-assignment-problem/app.js     | 30 ++++++++++++++++++++++++
 lists-cond-assignment-problem/index.html | 10 ++++----
 2 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/lists-cond-assignment-problem/app.js b/lists-cond-assignment-problem/app.js
index e69de29..6e9d67a 100644
--- a/lists-cond-assignment-problem/app.js
+++ b/lists-cond-assignment-problem/app.js
@@ -0,0 +1,30 @@
+"use strict";
+
+const app = Vue.createApp({
+    data() {
+        return {
+            tasks: [],
+            newTask: "",
+            showTasks: true,
+        };
+    },
+    computed: {
+        buttonText() {
+            if (this.showTasks) {
+                return "Hide Tasks";
+            } else if (!this.showTasks) {
+                return "Show Tasks";
+            }
+        },
+    },
+    methods: {
+        addTask(newTask) {
+            this.tasks.push(this.newTask);
+        },
+        toggleTasks() {
+            this.showTasks = !this.showTasks;
+        },
+    },
+});
+
+app.mount("#assignment");
diff --git a/lists-cond-assignment-problem/index.html b/lists-cond-assignment-problem/index.html
index 13ed827..986e992 100644
--- a/lists-cond-assignment-problem/index.html
+++ b/lists-cond-assignment-problem/index.html
@@ -19,14 +19,16 @@
         <h2>Assignment</h2>
         <!-- 1) Add code to manage a list of tasks in a Vue app -->
         <!-- When clicking "Add Task" a new task with the entered text should be added -->
-        <input type="text">
-        <button>Add Task</button>
-        <ul>
+        <input type="text" v-model="newTask">
+        <button @click="addTask">Add Task</button>
+        <ul v-if="showTasks">
             <!-- 2) Output the list of tasks here -->
+            <li v-for="task in tasks" :key="task">{{task}}</li>
         </ul>
+        <p v-if="!showTasks"></p>
         <!-- 3) When the below button is pressed, the list should be shown or hidden -->
         <!-- BONUS: Also update the button caption -->
-        <button>Hide / Show List</button>
+        <button @click="toggleTasks">{{ buttonText }}</button>
     </section>
 </body>