From 44695d9b6c871bad2366e3fde89969c862341296 Mon Sep 17 00:00:00 2001
From: Cristiano Magro <cristiano.magro@vola.it>
Date: Thu, 26 Dec 2024 23:24:20 +0100
Subject: [PATCH] 03 le lezioni di questa sezione
---
03 - lists conditional/lists-cond-assignment-problem/index.html | 19 +
03 - lists conditional/lists-cond-03-rendering-lists-of-data/app.js | 15 +
03 - lists conditional/lists-cond-04-diving-deeper-into-v-for/styles.css | 80 ++++++
03 - lists conditional/lists-cond-02-v-if-v-else-v-else-if/app.js | 15 +
03 - lists conditional/lists-cond-05-removing-list-items/app.js | 18 +
03 - lists conditional/lists-cond-02-v-if-v-else-v-else-if/index.html | 29 ++
03 - lists conditional/lists-cond-06-lists-keys/styles.css | 80 ++++++
03 - lists conditional/lists-cond-03-rendering-lists-of-data/styles.css | 80 ++++++
03 - lists conditional/lists-cond-assignment-problem/app.js | 25 ++
03 - lists conditional/lists-cond-04-diving-deeper-into-v-for/app.js | 15 +
03 - lists conditional/lists-cond-05-removing-list-items/styles.css | 80 ++++++
03 - lists conditional/lists-cond-06-lists-keys/index.html | 40 +++
03 - lists conditional/lists-cond-02-v-if-v-else-v-else-if/styles.css | 80 ++++++
03 - lists conditional/lists-cond-06-lists-keys/app.js | 18 +
03 - lists conditional/lists-cond-03-rendering-lists-of-data/index.html | 29 ++
03 - lists conditional/lists-cond-04-diving-deeper-into-v-for/index.html | 37 +++
03 - lists conditional/lists-cond-05-removing-list-items/index.html | 39 +++
17 files changed, 694 insertions(+), 5 deletions(-)
diff --git a/03 - lists conditional/lists-cond-02-v-if-v-else-v-else-if/app.js b/03 - lists conditional/lists-cond-02-v-if-v-else-v-else-if/app.js
new file mode 100644
index 0000000..961c6ab
--- /dev/null
+++ b/03 - lists conditional/lists-cond-02-v-if-v-else-v-else-if/app.js
@@ -0,0 +1,15 @@
+const app = Vue.createApp({
+ data() {
+ return {
+ enteredGoalValue: '',
+ goals: []
+ };
+ },
+ methods: {
+ addGoal() {
+ this.goals.push(this.enteredGoalValue);
+ }
+ }
+});
+
+app.mount('#user-goals');
\ No newline at end of file
diff --git a/03 - lists conditional/lists-cond-02-v-if-v-else-v-else-if/index.html b/03 - lists conditional/lists-cond-02-v-if-v-else-v-else-if/index.html
new file mode 100644
index 0000000..216fb6e
--- /dev/null
+++ b/03 - lists conditional/lists-cond-02-v-if-v-else-v-else-if/index.html
@@ -0,0 +1,29 @@
+<!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@next" defer></script>
+ <script src="app.js" defer></script>
+ </head>
+ <body>
+ <header>
+ <h1>Vue Course Goals</h1>
+ </header>
+ <section id="user-goals">
+ <h2>My course goals</h2>
+ <input type="text" v-model="enteredGoalValue" />
+ <button @click="addGoal">Add Goal</button>
+ <p v-if="goals.length === 0">No goals have been added yet - please start adding some!</p>
+ <ul v-else>
+ <li>Goal</li>
+ </ul>
+ </section>
+ </body>
+</html>
diff --git a/03 - lists conditional/lists-cond-02-v-if-v-else-v-else-if/styles.css b/03 - lists conditional/lists-cond-02-v-if-v-else-v-else-if/styles.css
new file mode 100644
index 0000000..fd51300
--- /dev/null
+++ b/03 - lists conditional/lists-cond-02-v-if-v-else-v-else-if/styles.css
@@ -0,0 +1,80 @@
+* {
+ box-sizing: border-box;
+}
+
+html {
+ font-family: 'Jost', sans-serif;
+}
+
+body {
+ margin: 0;
+}
+
+header {
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+ margin: 3rem;
+ border-radius: 10px;
+ padding: 1rem;
+ background-color: #1b995e;
+ color: white;
+ text-align: center;
+}
+
+#user-goals {
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+ margin: 3rem;
+ border-radius: 10px;
+ padding: 1rem;
+ text-align: center;
+}
+
+#user-goals h2 {
+ font-size: 2rem;
+ border-bottom: 4px solid #ccc;
+ color: #1b995e;
+ margin: 0 0 1rem 0;
+}
+
+#user-goals ul {
+ list-style: none;
+ margin: 1rem 0;
+ padding: 0;
+}
+
+#user-goals li {
+ margin: 1rem 0;
+ font-size: 1.25rem;
+ font-weight: bold;
+ background-color: #8ddba4;
+ padding: 0.5rem;
+ color: #1f1f1f;
+ border-radius: 25px;
+}
+
+#user-goals input {
+ font: inherit;
+ border: 1px solid #ccc;
+}
+
+#user-goals input:focus {
+ outline: none;
+ border-color: #1b995e;
+ background-color: #d7fdeb;
+}
+
+#user-goals 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);
+}
+
+#user-goals button:hover,
+#user-goals button:active {
+ background-color: #ec3169;
+ border-color: #ec3169;
+ box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
+}
diff --git a/03 - lists conditional/lists-cond-03-rendering-lists-of-data/app.js b/03 - lists conditional/lists-cond-03-rendering-lists-of-data/app.js
new file mode 100644
index 0000000..961c6ab
--- /dev/null
+++ b/03 - lists conditional/lists-cond-03-rendering-lists-of-data/app.js
@@ -0,0 +1,15 @@
+const app = Vue.createApp({
+ data() {
+ return {
+ enteredGoalValue: '',
+ goals: []
+ };
+ },
+ methods: {
+ addGoal() {
+ this.goals.push(this.enteredGoalValue);
+ }
+ }
+});
+
+app.mount('#user-goals');
\ No newline at end of file
diff --git a/03 - lists conditional/lists-cond-03-rendering-lists-of-data/index.html b/03 - lists conditional/lists-cond-03-rendering-lists-of-data/index.html
new file mode 100644
index 0000000..17a7983
--- /dev/null
+++ b/03 - lists conditional/lists-cond-03-rendering-lists-of-data/index.html
@@ -0,0 +1,29 @@
+<!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@next" defer></script>
+ <script src="app.js" defer></script>
+ </head>
+ <body>
+ <header>
+ <h1>Vue Course Goals</h1>
+ </header>
+ <section id="user-goals">
+ <h2>My course goals</h2>
+ <input type="text" v-model="enteredGoalValue" />
+ <button @click="addGoal">Add Goal</button>
+ <p v-if="goals.length === 0">No goals have been added yet - please start adding some!</p>
+ <ul v-else>
+ <li v-for="goal in goals">{{ goal }}</li>
+ </ul>
+ </section>
+ </body>
+</html>
diff --git a/03 - lists conditional/lists-cond-03-rendering-lists-of-data/styles.css b/03 - lists conditional/lists-cond-03-rendering-lists-of-data/styles.css
new file mode 100644
index 0000000..fd51300
--- /dev/null
+++ b/03 - lists conditional/lists-cond-03-rendering-lists-of-data/styles.css
@@ -0,0 +1,80 @@
+* {
+ box-sizing: border-box;
+}
+
+html {
+ font-family: 'Jost', sans-serif;
+}
+
+body {
+ margin: 0;
+}
+
+header {
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+ margin: 3rem;
+ border-radius: 10px;
+ padding: 1rem;
+ background-color: #1b995e;
+ color: white;
+ text-align: center;
+}
+
+#user-goals {
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+ margin: 3rem;
+ border-radius: 10px;
+ padding: 1rem;
+ text-align: center;
+}
+
+#user-goals h2 {
+ font-size: 2rem;
+ border-bottom: 4px solid #ccc;
+ color: #1b995e;
+ margin: 0 0 1rem 0;
+}
+
+#user-goals ul {
+ list-style: none;
+ margin: 1rem 0;
+ padding: 0;
+}
+
+#user-goals li {
+ margin: 1rem 0;
+ font-size: 1.25rem;
+ font-weight: bold;
+ background-color: #8ddba4;
+ padding: 0.5rem;
+ color: #1f1f1f;
+ border-radius: 25px;
+}
+
+#user-goals input {
+ font: inherit;
+ border: 1px solid #ccc;
+}
+
+#user-goals input:focus {
+ outline: none;
+ border-color: #1b995e;
+ background-color: #d7fdeb;
+}
+
+#user-goals 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);
+}
+
+#user-goals button:hover,
+#user-goals button:active {
+ background-color: #ec3169;
+ border-color: #ec3169;
+ box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
+}
diff --git a/03 - lists conditional/lists-cond-04-diving-deeper-into-v-for/app.js b/03 - lists conditional/lists-cond-04-diving-deeper-into-v-for/app.js
new file mode 100644
index 0000000..961c6ab
--- /dev/null
+++ b/03 - lists conditional/lists-cond-04-diving-deeper-into-v-for/app.js
@@ -0,0 +1,15 @@
+const app = Vue.createApp({
+ data() {
+ return {
+ enteredGoalValue: '',
+ goals: []
+ };
+ },
+ methods: {
+ addGoal() {
+ this.goals.push(this.enteredGoalValue);
+ }
+ }
+});
+
+app.mount('#user-goals');
\ No newline at end of file
diff --git a/03 - lists conditional/lists-cond-04-diving-deeper-into-v-for/index.html b/03 - lists conditional/lists-cond-04-diving-deeper-into-v-for/index.html
new file mode 100644
index 0000000..a647073
--- /dev/null
+++ b/03 - lists conditional/lists-cond-04-diving-deeper-into-v-for/index.html
@@ -0,0 +1,37 @@
+<!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@next" defer></script>
+ <script src="app.js" defer></script>
+ </head>
+ <body>
+ <header>
+ <h1>Vue Course Goals</h1>
+ </header>
+ <section id="user-goals">
+ <h2>My course goals</h2>
+ <input type="text" v-model="enteredGoalValue" />
+ <button @click="addGoal">Add Goal</button>
+ <p v-if="goals.length === 0">
+ No goals have been added yet - please start adding some!
+ </p>
+ <ul v-else>
+ <li v-for="(goal, index) in goals">{{ goal }} - {{ index }}</li>
+ </ul>
+ <!-- <ul>
+ <li v-for="num in 10">{{ num }}</li>
+ </ul> -->
+ <!-- <ul>
+ <li v-for="(value, key, index) in {name: 'Max', age: 31}">{{ key }}: {{ value }} - {{ index }}</li>
+ </ul> -->
+ </section>
+ </body>
+</html>
diff --git a/03 - lists conditional/lists-cond-04-diving-deeper-into-v-for/styles.css b/03 - lists conditional/lists-cond-04-diving-deeper-into-v-for/styles.css
new file mode 100644
index 0000000..fd51300
--- /dev/null
+++ b/03 - lists conditional/lists-cond-04-diving-deeper-into-v-for/styles.css
@@ -0,0 +1,80 @@
+* {
+ box-sizing: border-box;
+}
+
+html {
+ font-family: 'Jost', sans-serif;
+}
+
+body {
+ margin: 0;
+}
+
+header {
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+ margin: 3rem;
+ border-radius: 10px;
+ padding: 1rem;
+ background-color: #1b995e;
+ color: white;
+ text-align: center;
+}
+
+#user-goals {
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+ margin: 3rem;
+ border-radius: 10px;
+ padding: 1rem;
+ text-align: center;
+}
+
+#user-goals h2 {
+ font-size: 2rem;
+ border-bottom: 4px solid #ccc;
+ color: #1b995e;
+ margin: 0 0 1rem 0;
+}
+
+#user-goals ul {
+ list-style: none;
+ margin: 1rem 0;
+ padding: 0;
+}
+
+#user-goals li {
+ margin: 1rem 0;
+ font-size: 1.25rem;
+ font-weight: bold;
+ background-color: #8ddba4;
+ padding: 0.5rem;
+ color: #1f1f1f;
+ border-radius: 25px;
+}
+
+#user-goals input {
+ font: inherit;
+ border: 1px solid #ccc;
+}
+
+#user-goals input:focus {
+ outline: none;
+ border-color: #1b995e;
+ background-color: #d7fdeb;
+}
+
+#user-goals 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);
+}
+
+#user-goals button:hover,
+#user-goals button:active {
+ background-color: #ec3169;
+ border-color: #ec3169;
+ box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
+}
diff --git a/03 - lists conditional/lists-cond-05-removing-list-items/app.js b/03 - lists conditional/lists-cond-05-removing-list-items/app.js
new file mode 100644
index 0000000..d5b295d
--- /dev/null
+++ b/03 - lists conditional/lists-cond-05-removing-list-items/app.js
@@ -0,0 +1,18 @@
+const app = Vue.createApp({
+ data() {
+ return {
+ enteredGoalValue: '',
+ goals: []
+ };
+ },
+ methods: {
+ addGoal() {
+ this.goals.push(this.enteredGoalValue);
+ },
+ removeGoal(idx) {
+ this.goals.splice(idx, 1);
+ }
+ }
+});
+
+app.mount('#user-goals');
\ No newline at end of file
diff --git a/03 - lists conditional/lists-cond-05-removing-list-items/index.html b/03 - lists conditional/lists-cond-05-removing-list-items/index.html
new file mode 100644
index 0000000..23446a2
--- /dev/null
+++ b/03 - lists conditional/lists-cond-05-removing-list-items/index.html
@@ -0,0 +1,39 @@
+<!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@next" defer></script>
+ <script src="app.js" defer></script>
+ </head>
+ <body>
+ <header>
+ <h1>Vue Course Goals</h1>
+ </header>
+ <section id="user-goals">
+ <h2>My course goals</h2>
+ <input type="text" v-model="enteredGoalValue" />
+ <button @click="addGoal">Add Goal</button>
+ <p v-if="goals.length === 0">
+ No goals have been added yet - please start adding some!
+ </p>
+ <ul v-else>
+ <li v-for="(goal, index) in goals" @click="removeGoal(index)">
+ {{ goal }} - {{ index }}
+ </li>
+ </ul>
+ <!-- <ul>
+ <li v-for="num in 10">{{ num }}</li>
+ </ul> -->
+ <!-- <ul>
+ <li v-for="(value, key, index) in {name: 'Max', age: 31}">{{ key }}: {{ value }} - {{ index }}</li>
+ </ul> -->
+ </section>
+ </body>
+</html>
diff --git a/03 - lists conditional/lists-cond-05-removing-list-items/styles.css b/03 - lists conditional/lists-cond-05-removing-list-items/styles.css
new file mode 100644
index 0000000..fd51300
--- /dev/null
+++ b/03 - lists conditional/lists-cond-05-removing-list-items/styles.css
@@ -0,0 +1,80 @@
+* {
+ box-sizing: border-box;
+}
+
+html {
+ font-family: 'Jost', sans-serif;
+}
+
+body {
+ margin: 0;
+}
+
+header {
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+ margin: 3rem;
+ border-radius: 10px;
+ padding: 1rem;
+ background-color: #1b995e;
+ color: white;
+ text-align: center;
+}
+
+#user-goals {
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+ margin: 3rem;
+ border-radius: 10px;
+ padding: 1rem;
+ text-align: center;
+}
+
+#user-goals h2 {
+ font-size: 2rem;
+ border-bottom: 4px solid #ccc;
+ color: #1b995e;
+ margin: 0 0 1rem 0;
+}
+
+#user-goals ul {
+ list-style: none;
+ margin: 1rem 0;
+ padding: 0;
+}
+
+#user-goals li {
+ margin: 1rem 0;
+ font-size: 1.25rem;
+ font-weight: bold;
+ background-color: #8ddba4;
+ padding: 0.5rem;
+ color: #1f1f1f;
+ border-radius: 25px;
+}
+
+#user-goals input {
+ font: inherit;
+ border: 1px solid #ccc;
+}
+
+#user-goals input:focus {
+ outline: none;
+ border-color: #1b995e;
+ background-color: #d7fdeb;
+}
+
+#user-goals 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);
+}
+
+#user-goals button:hover,
+#user-goals button:active {
+ background-color: #ec3169;
+ border-color: #ec3169;
+ box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
+}
diff --git a/03 - lists conditional/lists-cond-06-lists-keys/app.js b/03 - lists conditional/lists-cond-06-lists-keys/app.js
new file mode 100644
index 0000000..d5b295d
--- /dev/null
+++ b/03 - lists conditional/lists-cond-06-lists-keys/app.js
@@ -0,0 +1,18 @@
+const app = Vue.createApp({
+ data() {
+ return {
+ enteredGoalValue: '',
+ goals: []
+ };
+ },
+ methods: {
+ addGoal() {
+ this.goals.push(this.enteredGoalValue);
+ },
+ removeGoal(idx) {
+ this.goals.splice(idx, 1);
+ }
+ }
+});
+
+app.mount('#user-goals');
\ No newline at end of file
diff --git a/03 - lists conditional/lists-cond-06-lists-keys/index.html b/03 - lists conditional/lists-cond-06-lists-keys/index.html
new file mode 100644
index 0000000..766b8d8
--- /dev/null
+++ b/03 - lists conditional/lists-cond-06-lists-keys/index.html
@@ -0,0 +1,40 @@
+<!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@next" defer></script>
+ <script src="app.js" defer></script>
+ </head>
+ <body>
+ <header>
+ <h1>Vue Course Goals</h1>
+ </header>
+ <section id="user-goals">
+ <h2>My course goals</h2>
+ <input type="text" v-model="enteredGoalValue" />
+ <button @click="addGoal">Add Goal</button>
+ <p v-if="goals.length === 0">
+ No goals have been added yet - please start adding some!
+ </p>
+ <ul v-else>
+ <li v-for="(goal, index) in goals" :key="goal" @click="removeGoal(index)">
+ <p>{{ goal }} - {{ index }}</p>
+ <input type="text" @click.stop>
+ </li>
+ </ul>
+ <!-- <ul>
+ <li v-for="num in 10">{{ num }}</li>
+ </ul> -->
+ <!-- <ul>
+ <li v-for="(value, key, index) in {name: 'Max', age: 31}">{{ key }}: {{ value }} - {{ index }}</li>
+ </ul> -->
+ </section>
+ </body>
+</html>
diff --git a/03 - lists conditional/lists-cond-06-lists-keys/styles.css b/03 - lists conditional/lists-cond-06-lists-keys/styles.css
new file mode 100644
index 0000000..fd51300
--- /dev/null
+++ b/03 - lists conditional/lists-cond-06-lists-keys/styles.css
@@ -0,0 +1,80 @@
+* {
+ box-sizing: border-box;
+}
+
+html {
+ font-family: 'Jost', sans-serif;
+}
+
+body {
+ margin: 0;
+}
+
+header {
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+ margin: 3rem;
+ border-radius: 10px;
+ padding: 1rem;
+ background-color: #1b995e;
+ color: white;
+ text-align: center;
+}
+
+#user-goals {
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+ margin: 3rem;
+ border-radius: 10px;
+ padding: 1rem;
+ text-align: center;
+}
+
+#user-goals h2 {
+ font-size: 2rem;
+ border-bottom: 4px solid #ccc;
+ color: #1b995e;
+ margin: 0 0 1rem 0;
+}
+
+#user-goals ul {
+ list-style: none;
+ margin: 1rem 0;
+ padding: 0;
+}
+
+#user-goals li {
+ margin: 1rem 0;
+ font-size: 1.25rem;
+ font-weight: bold;
+ background-color: #8ddba4;
+ padding: 0.5rem;
+ color: #1f1f1f;
+ border-radius: 25px;
+}
+
+#user-goals input {
+ font: inherit;
+ border: 1px solid #ccc;
+}
+
+#user-goals input:focus {
+ outline: none;
+ border-color: #1b995e;
+ background-color: #d7fdeb;
+}
+
+#user-goals 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);
+}
+
+#user-goals button:hover,
+#user-goals button:active {
+ background-color: #ec3169;
+ border-color: #ec3169;
+ box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
+}
diff --git a/03 - lists conditional/lists-cond-assignment-problem/app.js b/03 - lists conditional/lists-cond-assignment-problem/app.js
index e69de29..6d2b2fa 100644
--- a/03 - lists conditional/lists-cond-assignment-problem/app.js
+++ b/03 - lists conditional/lists-cond-assignment-problem/app.js
@@ -0,0 +1,25 @@
+const app = Vue.createApp({
+ data() {
+ return {
+ tasks: [],
+ taskEntered: "",
+ showTasks: true,
+ };
+ },
+ computed: {
+ toggleTitle(){
+ return this.showTasks ? "Hide" : "Show"
+ }
+ },
+ watch: {},
+ methods: {
+ addTask(){
+ this.tasks.push(this.taskEntered);
+ },
+ toggleTasks(){
+ this.showTasks = !this.showTasks;
+ }
+ },
+ });
+
+ app.mount("#assignment");
\ No newline at end of file
diff --git a/03 - lists conditional/lists-cond-assignment-problem/index.html b/03 - lists conditional/lists-cond-assignment-problem/index.html
index c1d904d..cf2fdde 100644
--- a/03 - lists conditional/lists-cond-assignment-problem/index.html
+++ b/03 - lists conditional/lists-cond-assignment-problem/index.html
@@ -9,7 +9,7 @@
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
- <script src="https://unpkg.com/vue@next" defer></script>
+ <script src="https://unpkg.com/vue@3.4.9/dist/vue.global.js"></script>
<script src="app.js" defer></script>
</head>
<body>
@@ -20,14 +20,23 @@
<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="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>Hide / Show List</button>
+ <button @click="toggleTasks">{{toggleTitle}} List</button>
</section>
</body>
</html>
--
Gitblit v1.8.0