From 8c672a568ad096f28d4c3a2ba95b01ecc30cc3ce Mon Sep 17 00:00:00 2001 From: Cristiano Magro <cristiano.magro@vola.it> Date: Thu, 26 Dec 2024 23:51:23 +0100 Subject: [PATCH] draw bar healt after attack --- 03 - lists conditional/lists-cond-assignment-problem/index.html | 42 ++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 42 insertions(+), 0 deletions(-) diff --git a/03 - lists conditional/lists-cond-assignment-problem/index.html b/03 - lists conditional/lists-cond-assignment-problem/index.html new file mode 100644 index 0000000..cf2fdde --- /dev/null +++ b/03 - lists conditional/lists-cond-assignment-problem/index.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <title>Vue Basics</title> + <link + href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap" + rel="stylesheet" + /> + <link rel="stylesheet" href="styles.css" /> + <script src="https://unpkg.com/vue@3.4.9/dist/vue.global.js"></script> + <script src="app.js" defer></script> + </head> + <body> + <header> + <h1>Vue Lists and Conditional Content</h1> + </header> + <section id="assignment"> + <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" v-model="taskEntered"> + <button @click="addTask">Add Task</button> + <!-- <ul v-show="showTasks"> --> + <!-- 2) Output the list of tasks here --> + <!-- <li v-for="task in tasks">{{task}}</li> + </ul> + <ul v-show="!showTasks"> + </ul> --> + + <ul > + <!-- 2) Output the list of tasks here --> + <li v-show="showTasks" v-for="task in tasks" :key="task">{{task}}</li> + </ul> + + <!-- 3) When the below button is pressed, the list should be shown or hidden --> + <!-- BONUS: Also update the button caption --> + <button @click="toggleTasks">{{toggleTitle}} List</button> + </section> + </body> +</html> -- Gitblit v1.8.0