add my solution for assignment 5

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");

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>