udemy/corso-vue.git

parent: b73b3b8a | patch | commit | show whitespace

Cristiano Magro

2024-12-26 44695d9b6c871bad2366e3fde89969c862341296

03 le lezioni di questa sezione

15 files added

2 files modified

	03 - lists conditional/lists-cond-02-v-if-v-else-v-else-if/app.js	15 ●●●●● patch \| view \| raw \| blame \| history
	03 - lists conditional/lists-cond-02-v-if-v-else-v-else-if/index.html	29 ●●●●● patch \| view \| raw \| blame \| history
	03 - lists conditional/lists-cond-02-v-if-v-else-v-else-if/styles.css	80 ●●●●● patch \| view \| raw \| blame \| history
	03 - lists conditional/lists-cond-03-rendering-lists-of-data/app.js	15 ●●●●● patch \| view \| raw \| blame \| history
	03 - lists conditional/lists-cond-03-rendering-lists-of-data/index.html	29 ●●●●● patch \| view \| raw \| blame \| history
	03 - lists conditional/lists-cond-03-rendering-lists-of-data/styles.css	80 ●●●●● patch \| view \| raw \| blame \| history
	03 - lists conditional/lists-cond-04-diving-deeper-into-v-for/app.js	15 ●●●●● patch \| view \| raw \| blame \| history
	03 - lists conditional/lists-cond-04-diving-deeper-into-v-for/index.html	37 ●●●●● patch \| view \| raw \| blame \| history
	03 - lists conditional/lists-cond-04-diving-deeper-into-v-for/styles.css	80 ●●●●● patch \| view \| raw \| blame \| history
	03 - lists conditional/lists-cond-05-removing-list-items/app.js	18 ●●●●● patch \| view \| raw \| blame \| history
	03 - lists conditional/lists-cond-05-removing-list-items/index.html	39 ●●●●● patch \| view \| raw \| blame \| history
	03 - lists conditional/lists-cond-05-removing-list-items/styles.css	80 ●●●●● patch \| view \| raw \| blame \| history
	03 - lists conditional/lists-cond-06-lists-keys/app.js	18 ●●●●● patch \| view \| raw \| blame \| history
	03 - lists conditional/lists-cond-06-lists-keys/index.html	40 ●●●●● patch \| view \| raw \| blame \| history
	03 - lists conditional/lists-cond-06-lists-keys/styles.css	80 ●●●●● patch \| view \| raw \| blame \| history
	03 - lists conditional/lists-cond-assignment-problem/app.js	25 ●●●●● patch \| view \| raw \| blame \| history
	03 - lists conditional/lists-cond-assignment-problem/index.html	17 ●●●●● patch \| view \| raw \| blame \| history

 03 - lists conditional/lists-cond-02-v-if-v-else-v-else-if/app.js

New file
@@ -0,0 +1,15 @@
const app = Vue.createApp({
  data() {
    return { 
      enteredGoalValue: '',
      goals: []
     };
  },
  methods: {
    addGoal() {
      this.goals.push(this.enteredGoalValue);
    }
  }
});

app.mount('#user-goals');

 03 - lists conditional/lists-cond-02-v-if-v-else-v-else-if/index.html

New file
@@ -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>

 03 - lists conditional/lists-cond-02-v-if-v-else-v-else-if/styles.css

New file
@@ -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);
}

 03 - lists conditional/lists-cond-03-rendering-lists-of-data/app.js

New file
@@ -0,0 +1,15 @@
const app = Vue.createApp({
  data() {
    return { 
      enteredGoalValue: '',
      goals: []
     };
  },
  methods: {
    addGoal() {
      this.goals.push(this.enteredGoalValue);
    }
  }
});

app.mount('#user-goals');

 03 - lists conditional/lists-cond-03-rendering-lists-of-data/index.html

New file
@@ -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>

 03 - lists conditional/lists-cond-03-rendering-lists-of-data/styles.css

New file
@@ -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);
}

 03 - lists conditional/lists-cond-04-diving-deeper-into-v-for/app.js

New file
@@ -0,0 +1,15 @@
const app = Vue.createApp({
  data() {
    return { 
      enteredGoalValue: '',
      goals: []
     };
  },
  methods: {
    addGoal() {
      this.goals.push(this.enteredGoalValue);
    }
  }
});

app.mount('#user-goals');

 03 - lists conditional/lists-cond-04-diving-deeper-into-v-for/index.html

New file
@@ -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>

 03 - lists conditional/lists-cond-04-diving-deeper-into-v-for/styles.css

New file
@@ -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);
}

 03 - lists conditional/lists-cond-05-removing-list-items/app.js

New file
@@ -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');

 03 - lists conditional/lists-cond-05-removing-list-items/index.html

New file
@@ -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>

 03 - lists conditional/lists-cond-05-removing-list-items/styles.css

New file
@@ -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);
}

 03 - lists conditional/lists-cond-06-lists-keys/app.js

New file
@@ -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');

 03 - lists conditional/lists-cond-06-lists-keys/index.html

New file
@@ -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>

 03 - lists conditional/lists-cond-06-lists-keys/styles.css

New file
@@ -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);
}

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

 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>
      <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>

New file
			@@ -0,0 +1,15 @@
			const app = Vue.createApp({
			data() {
			return {
			enteredGoalValue: '',
			goals: []
			};
			},
			methods: {
			addGoal() {
			this.goals.push(this.enteredGoalValue);
			}
			}
			});

			app.mount('#user-goals');

New file
			@@ -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>

New file
			@@ -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);
			}

New file
			@@ -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>

New file
			@@ -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');

New file
			@@ -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>

New file
			@@ -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>

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

			@@ -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>
			<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>