udemy/corso-vue.git

	02 - basic/basics-03-events-starting-code/app.js	13 ●●●●● patch \| view \| raw \| blame \| history
	02 - basic/basics-03-events-starting-code/index.html	16 ●●●●● patch \| view \| raw \| blame \| history
	02 - basic/basics-05-using-the-native-event-object/app.js	38 ●●●●● patch \| view \| raw \| blame \| history
	02 - basic/basics-05-using-the-native-event-object/index.html	8 ●●●●● patch \| view \| raw \| blame \| history
	02 - basic/basics-assignment-2-problem/app.js	22 ●●●●● patch \| view \| raw \| blame \| history
	02 - basic/basics-assignment-2-problem/index.html	37 ●●●●● patch \| view \| raw \| blame \| history
	02 - basic/basics-assignment-2-problem/styles.css	73 ●●●●● patch \| view \| raw \| blame \| history
	03 - lists conditional/lists-cond-01-starting-setup/app.js	9 ●●●●● patch \| view \| raw \| blame \| history
	03 - lists conditional/lists-cond-01-starting-setup/index.html	11 ●●●●● patch \| view \| raw \| blame \| history
	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	42 ●●●●● patch \| view \| raw \| blame \| history
	03 - lists conditional/lists-cond-assignment-problem/styles.css	80 ●●●●● patch \| view \| raw \| blame \| history
	04 - monster slayer game/prj-monster-01-starting-setup/app.js	35 ●●●●● patch \| view \| raw \| blame \| history
	04 - monster slayer game/prj-monster-01-starting-setup/index.html	50 ●●●●● patch \| view \| raw \| blame \| history
	04 - monster slayer game/prj-monster-01-starting-setup/styles.css	119 ●●●●● patch \| view \| raw \| blame \| history

 02 - basic/basics-03-events-starting-code/app.js

@@ -1,13 +1,20 @@
const app = Vue.createApp({
  data() {
    return {
      counter: 0,
      name,
      counter: 10,
      name: '',
      confirmedName: '',
    };
  },
  methods: {
    confirmInput(){
      this.confirmedName = this.name;
    },
    submitForm(event){
      alert("Subit form");
    },
    setName(event){
        this.name = event.target.value;
      this.name= event.target.value ;
    },
    add(num) {
      this.counter = this.counter + num;

 02 - basic/basics-03-events-starting-code/index.html

@@ -9,8 +9,7 @@
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
    <script src="https://unpkg.com/vue@3.4.9/dist/vue.global.js"></script> 

    <script src="https://unpkg.com/vue@3.4.9/dist/vue.global.js" defer></script>
    <script src="app.js" defer></script>
  </head>
  <body>
@@ -21,9 +20,18 @@
      <h2>Events in Action</h2>
      <button v-on:click="add(5)">Add 5</button>
      <button v-on:click="sub(5)">Subtract 5</button>
      <p v-once>Starting counter: {{ counter }}</p>
      <p>Result: {{ counter }}</p>
      <input type="text" v-on:input="setName">
      <p>Il tuo nome: {{ name }}</p>
      <input
        type="text"
        v-on:input="setName($event)"
        v-on:keyup.enter="confirmInput()"
      />
      <p>Il tuo nome: {{ confirmedName }}</p>
      <form v-on:submit.prevent="submitForm">
        <input type="text" />
        <button>Sign Up</button>
      </form>
    </section>
  </body>
</html>

 02 - basic/basics-05-using-the-native-event-object/app.js

@@ -2,12 +2,36 @@
  data() {
    return {
      counter: 0,
      name: ''
      name: "",
      cognome: "",
      nometot: "",
    };
  },
  watch: {
    // name(value){
    //   if (this.name === ''){
    //     this.nometot = '';
    //   }
    //   this.nometot = value + " Cognome";
    // }
  },
  computed: {
    fullname() {
      if (this.name === "" || this.cognome === "") {
        return "";
      }
      return this.name + " " + this.cognome;
    },
  },
  methods: {
    // outputFullname() {
    //   if (this.name === "" || this.cognome === "") {
    //     return "";
    //   }
    //   return this.name + " " + this.cognome;
    // },
    setName(event, lastName) {
      this.name = event.target.value + ' ' + lastName;
      this.name = event.target.value; //+ ' ' + lastName;
    },
    add(num) {
      this.counter = this.counter + num;
@@ -15,8 +39,12 @@
    reduce(num) {
      this.counter = this.counter - num;
      // this.counter--;
    }
  }
    },
    resetInput() {
      this.name = "";
      this.cogome = "";
    },
  },
});

app.mount('#events');
app.mount("#events");

 02 - basic/basics-05-using-the-native-event-object/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" defer></script>
    <script src="app.js" defer></script>
  </head>
  <body>
@@ -21,8 +21,10 @@
      <button v-on:click="add(10)">Add 10</button>
      <button v-on:click="reduce(5)">Subtract 5</button>
      <p>Result: {{ counter }}</p>
      <input type="text" v-on:input="setName($event, 'Schwarzmüller')">
      <p>Your Name: {{ name }}</p>
      <input type="text" v-model="name" />
      <input type="text" v-model="cognome" />
      <button v-on:click="resetInput">Reset Input</button>
      <p>Your Name: {{ fullname }}</p>
    </section>
  </body>
</html>

 02 - basic/basics-assignment-2-problem/app.js

New file
@@ -0,0 +1,22 @@
const app = Vue.createApp({
  data() {
    return {
      messaggio: "Hi Alert!",
      kdInput: "",
      keInput: "",
    };
  },
  methods: {
    myAlert() {
      alert(this.messaggio);
    },
    myKeydown(event){
        this.kdInput = event.target.value;
    },
    myKeyEnter(event){
        this.keInput = event.target.value;
    }    
  },
});

app.mount("#assignment");

 02 - basic/basics-assignment-2-problem/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@3.4.9/dist/vue.global.js" defer></script>
    <script src="app.js" defer></script>
  </head>
  <body>
    <header>
      <h1>Events</h1>
    </header>
    <section id="assignment">
      <h2>Event Practice</h2>
      <!-- 1) Show an alert (any text of your choice) when the button is pressed -->
      <button v-on:click="myAlert">Show Alert</button>
      <hr />
      <!-- 2) Register the user input on "keydown" and output it in the paragraph (hint: event.target.value helps) -->
      <input type="text" v-on:keydown="myKeydown" />
      <p>{{ kdInput }}</p>
      <hr />
      <!-- 3) Repeat 2) but only output the entered value if the ENTER key was pressed -->
      <input
        type="text"
        v-on:keydown="myKeydown"
        v-on:keyup.enter="myKeyEnter"
      />
      <p>{{ keInput }}</p>
    </section>
  </body>
</html>

 02 - basic/basics-assignment-2-problem/styles.css

New file
@@ -0,0 +1,73 @@
* {
  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;
}

#assignment {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  margin: 3rem;
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
}

#assignment h2 {
  font-size: 2rem;
  border-bottom: 4px solid #ccc;
  color: #1b995e;
  margin: 0 0 1rem 0;
}

#assignment p {
  font-size: 1.25rem;
  font-weight: bold;
  background-color: #8ddba4;
  padding: 0.5rem;
  color: #1f1f1f;
  border-radius: 25px;
}

#assignment input {
  font: inherit;
  border: 1px solid #ccc;
}

#assignment input:focus {
  outline: none;
  border-color: #1b995e;
  background-color: #d7fdeb;
}

#assignment 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);
}

#assignment button:hover,
#assignment button:active {
  background-color: #ec3169;
  border-color: #ec3169;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
}

 03 - lists conditional/lists-cond-01-starting-setup/app.js

@@ -1,11 +1,18 @@
const app = Vue.createApp({
  data() {
    return { goals: [] };
    return { 
      goals: [],
      enteredGoal: '',
     };

  },
  methods: {
    addGoal() {
      this.goals.push(this.enteredGoal)
    },
    removeGoal(idx){
      this.goals.splice(idx,1);
    },
  },
});


 03 - lists conditional/lists-cond-01-starting-setup/index.html

@@ -18,12 +18,17 @@
    </header>
    <section id="user-goals">
      <h2>My course goals</h2>
      <input type="text" v-model="enteredGoal"/>
      <input type="text" v-model="enteredGoal" />
      <button @click="addGoal">Add Goal</button>
      <p v-if="goals.length === 0">No goals have been added yet - please start adding some!</p>
      <p v-if="goals.length === 0">
        No goals have been added yet - please start adding some!
      </p>
      <ul v-else>
        <li>Goal</li>
        <li v-for="(goal, idx) in goals" @click="removeGoal(idx)">{{idx}} - {{goal}}</li>
      </ul>
      <!-- <ul>
        <li v-for="(value, key) in {nome: 'cristiano', cognome: 'magro'}">{{key}}: {{value}}</li>
      </ul> -->
    </section>
  </body>
</html>

 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

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

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

 03 - lists conditional/lists-cond-assignment-problem/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;
}

#assignment {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  margin: 3rem;
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
}

#assignment h2 {
  font-size: 2rem;
  border-bottom: 4px solid #ccc;
  color: #1b995e;
  margin: 0 0 1rem 0;
}

#assignment ul {
  list-style: none;
  margin: 1rem 0;
  padding: 0;
}

#assignment li {
  margin: 1rem 0;
  font-size: 1.25rem;
  font-weight: bold;
  background-color: #8ddba4;
  padding: 0.5rem;
  color: #1f1f1f;
  border-radius: 25px;
}

#assignment input {
  font: inherit;
  border: 1px solid #ccc;
}

#assignment input:focus {
  outline: none;
  border-color: #1b995e;
  background-color: #d7fdeb;
}

#assignment 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);
}

#assignment button:hover,
#assignment button:active {
  background-color: #ec3169;
  border-color: #ec3169;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
}

 04 - monster slayer game/prj-monster-01-starting-setup/app.js

New file
@@ -0,0 +1,35 @@
function getRandomValue(min, max){
    return Math.floor(Math.random() * (max - min)) + min;
}


const app = Vue.createApp({
  data() {
    return {
      playerHealth: 100,
      monsterHealth: 100,
    };
  },
  computed: {
    monsterBarStyle(){
        return {width: this.monsterHealth + '%'}
    },
    playerBarStyle(){
        return {width: this.playerHealth + '%'}
    },
  },
  watch: {},
  methods: {
    attackMonster() {
      const attackValue = getRandomValue(5,12);
      this.monsterHealth -= attackValue;
      this.attackPlayer();
    },
    attackPlayer(){
        const attackValue = getRandomValue(8,15);
        this.playerHealth -= attackValue;
    },
  },
});

app.mount("#game");

 04 - monster slayer game/prj-monster-01-starting-setup/index.html

New file
@@ -0,0 +1,50 @@
<!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>Monster Slayer</h1>
    </header>
    <div id="game">
      <section id="monster" class="container">
        <h2>Monster Health</h2>
        <div class="healthbar">
          <div
            class="healthbar__value"
            :style="monsterBarStyle"
          ></div>
        </div>
      </section>
      <section id="player" class="container">
        <h2>Your Health</h2>
        <div class="healthbar">
          <div
            class="healthbar__value"
            :style="playerBarStyle"
          ></div>
        </div>
      </section>
      <section id="controls">
        <button @click="attackMonster">ATTACK</button>
        <button>SPECIAL ATTACK</button>
        <button>HEAL</button>
        <button>SURRENDER</button>
      </section>
      <section id="log" class="container">
        <h2>Battle Log</h2>
        <ul></ul>
      </section>
    </div>
  </body>
</html>

 04 - monster slayer game/prj-monster-01-starting-setup/styles.css

New file
@@ -0,0 +1,119 @@
* {
  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);
  padding: 0.5rem;
  background-color: #880017;
  color: white;
  text-align: center;
  margin-bottom: 2rem;
}

section {
  width: 90%;
  max-width: 40rem;
  margin: auto;
}

.healthbar {
  width: 100%;
  height: 40px;
  border: 1px solid #575757;
  margin: 1rem 0;
  background: #fde5e5;
}

.healthbar__value {
  background-color: #00a876;
  width: 100%;
  height: 100%;
}

.container {
  text-align: center;
  padding: 0.5rem;
  margin: 1rem auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  border-radius: 12px;
}

#monster h2,
#player h2 {
  margin: 0.25rem;
}

#controls {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

button {
  font: inherit;
  border: 1px solid #88005b;
  background-color: #88005b;
  color: white;
  padding: 1rem 2rem;
  border-radius: 12px;
  margin: 1rem;
  width: 12rem;
  cursor: pointer;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
}

button:focus {
  outline: none;
}

button:hover,
button:active {
  background-color: #af0a78;
  border-color: #af0a78;
  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.26);
}

button:disabled {
  background-color: #ccc;
  border-color: #ccc;
  box-shadow: none;
  color: #3f3f3f;
  cursor: not-allowed;
}

#log ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#log li {
  margin: 0.5rem 0;
}

.log--player {
  color: #7700ff;
}

.log--monster {
  color: #da8d00;
}

.log--damage {
  color: red;
}

.log--heal {
  color: green;
}

			@@ -1,13 +1,20 @@
			const app = Vue.createApp({
			data() {
			return {
			counter: 0,
			name,
			counter: 10,
			name: '',
			confirmedName: '',
			};
			},
			methods: {
			confirmInput(){
			this.confirmedName = this.name;
			},
			submitForm(event){
			alert("Subit form");
			},
			setName(event){
			this.name = event.target.value;
			this.name= event.target.value ;
			},
			add(num) {
			this.counter = this.counter + num;

			@@ -9,8 +9,7 @@
			rel="stylesheet"
			/>
			<link rel="stylesheet" href="styles.css" />
			<script src="https://unpkg.com/vue@3.4.9/dist/vue.global.js"></script>

			<script src="https://unpkg.com/vue@3.4.9/dist/vue.global.js" defer></script>
			<script src="app.js" defer></script>
			</head>
			<body>
			@@ -21,9 +20,18 @@
			<h2>Events in Action</h2>
			<button v-on:click="add(5)">Add 5</button>
			<button v-on:click="sub(5)">Subtract 5</button>
			<p v-once>Starting counter: {{ counter }}</p>
			<p>Result: {{ counter }}</p>
			<input type="text" v-on:input="setName">
			<p>Il tuo nome: {{ name }}</p>
			<input
			type="text"
			v-on:input="setName($event)"
			v-on:keyup.enter="confirmInput()"
			/>
			<p>Il tuo nome: {{ confirmedName }}</p>
			<form v-on:submit.prevent="submitForm">
			<input type="text" />
			<button>Sign Up</button>
			</form>
			</section>
			</body>
			</html>

			@@ -2,12 +2,36 @@
			data() {
			return {
			counter: 0,
			name: ''
			name: "",
			cognome: "",
			nometot: "",
			};
			},
			watch: {
			// name(value){
			// if (this.name === ''){
			// this.nometot = '';
			// }
			// this.nometot = value + " Cognome";
			// }
			},
			computed: {
			fullname() {
			if (this.name === "" \|\| this.cognome === "") {
			return "";
			}
			return this.name + " " + this.cognome;
			},
			},
			methods: {
			// outputFullname() {
			// if (this.name === "" \|\| this.cognome === "") {
			// return "";
			// }
			// return this.name + " " + this.cognome;
			// },
			setName(event, lastName) {
			this.name = event.target.value + ' ' + lastName;
			this.name = event.target.value; //+ ' ' + lastName;
			},
			add(num) {
			this.counter = this.counter + num;
			@@ -15,8 +39,12 @@
			reduce(num) {
			this.counter = this.counter - num;
			// this.counter--;
			}
			}
			},
			resetInput() {
			this.name = "";
			this.cogome = "";
			},
			},
			});

			app.mount('#events');
			app.mount("#events");

			@@ -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" defer></script>
			<script src="app.js" defer></script>
			</head>
			<body>
			@@ -21,8 +21,10 @@
			<button v-on:click="add(10)">Add 10</button>
			<button v-on:click="reduce(5)">Subtract 5</button>
			<p>Result: {{ counter }}</p>
			<input type="text" v-on:input="setName($event, 'Schwarzmüller')">
			<p>Your Name: {{ name }}</p>
			<input type="text" v-model="name" />
			<input type="text" v-model="cognome" />
			<button v-on:click="resetInput">Reset Input</button>
			<p>Your Name: {{ fullname }}</p>
			</section>
			</body>
			</html>

New file
			@@ -0,0 +1,22 @@
			const app = Vue.createApp({
			data() {
			return {
			messaggio: "Hi Alert!",
			kdInput: "",
			keInput: "",
			};
			},
			methods: {
			myAlert() {
			alert(this.messaggio);
			},
			myKeydown(event){
			this.kdInput = event.target.value;
			},
			myKeyEnter(event){
			this.keInput = event.target.value;
			}
			},
			});

			app.mount("#assignment");

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@3.4.9/dist/vue.global.js" defer></script>
			<script src="app.js" defer></script>
			</head>
			<body>
			<header>
			<h1>Events</h1>
			</header>
			<section id="assignment">
			<h2>Event Practice</h2>
			<!-- 1) Show an alert (any text of your choice) when the button is pressed -->
			<button v-on:click="myAlert">Show Alert</button>
			<hr />
			<!-- 2) Register the user input on "keydown" and output it in the paragraph (hint: event.target.value helps) -->
			<input type="text" v-on:keydown="myKeydown" />
			<p>{{ kdInput }}</p>
			<hr />
			<!-- 3) Repeat 2) but only output the entered value if the ENTER key was pressed -->
			<input
			type="text"
			v-on:keydown="myKeydown"
			v-on:keyup.enter="myKeyEnter"
			/>
			<p>{{ keInput }}</p>
			</section>
			</body>
			</html>

New file
			@@ -0,0 +1,73 @@
			* {
			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;
			}

			#assignment {
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
			margin: 3rem;
			border-radius: 10px;
			padding: 1rem;
			text-align: center;
			}

			#assignment h2 {
			font-size: 2rem;
			border-bottom: 4px solid #ccc;
			color: #1b995e;
			margin: 0 0 1rem 0;
			}

			#assignment p {
			font-size: 1.25rem;
			font-weight: bold;
			background-color: #8ddba4;
			padding: 0.5rem;
			color: #1f1f1f;
			border-radius: 25px;
			}

			#assignment input {
			font: inherit;
			border: 1px solid #ccc;
			}

			#assignment input:focus {
			outline: none;
			border-color: #1b995e;
			background-color: #d7fdeb;
			}

			#assignment 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);
			}

			#assignment button:hover,
			#assignment button:active {
			background-color: #ec3169;
			border-color: #ec3169;
			box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
			}

			@@ -1,11 +1,18 @@
			const app = Vue.createApp({
			data() {
			return { goals: [] };
			return {
			goals: [],
			enteredGoal: '',
			};

			},
			methods: {
			addGoal() {
			this.goals.push(this.enteredGoal)
			},
			removeGoal(idx){
			this.goals.splice(idx,1);
			},
			},
			});

			@@ -18,12 +18,17 @@
			</header>
			<section id="user-goals">
			<h2>My course goals</h2>
			<input type="text" v-model="enteredGoal"/>
			<input type="text" v-model="enteredGoal" />
			<button @click="addGoal">Add Goal</button>
			<p v-if="goals.length === 0">No goals have been added yet - please start adding some!</p>
			<p v-if="goals.length === 0">
			No goals have been added yet - please start adding some!
			</p>
			<ul v-else>
			<li>Goal</li>
			<li v-for="(goal, idx) in goals" @click="removeGoal(idx)">{{idx}} - {{goal}}</li>
			</ul>
			<!-- <ul>
			<li v-for="(value, key) in {nome: 'cristiano', cognome: 'magro'}">{{key}}: {{value}}</li>
			</ul> -->
			</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,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>

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

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

New file
			@@ -0,0 +1,35 @@
			function getRandomValue(min, max){
			return Math.floor(Math.random() * (max - min)) + min;
			}


			const app = Vue.createApp({
			data() {
			return {
			playerHealth: 100,
			monsterHealth: 100,
			};
			},
			computed: {
			monsterBarStyle(){
			return {width: this.monsterHealth + '%'}
			},
			playerBarStyle(){
			return {width: this.playerHealth + '%'}
			},
			},
			watch: {},
			methods: {
			attackMonster() {
			const attackValue = getRandomValue(5,12);
			this.monsterHealth -= attackValue;
			this.attackPlayer();
			},
			attackPlayer(){
			const attackValue = getRandomValue(8,15);
			this.playerHealth -= attackValue;
			},
			},
			});

			app.mount("#game");

New file
			@@ -0,0 +1,50 @@
			<!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>Monster Slayer</h1>
			</header>
			<div id="game">
			<section id="monster" class="container">
			<h2>Monster Health</h2>
			<div class="healthbar">
			<div
			class="healthbar__value"
			:style="monsterBarStyle"
			></div>
			</div>
			</section>
			<section id="player" class="container">
			<h2>Your Health</h2>
			<div class="healthbar">
			<div
			class="healthbar__value"
			:style="playerBarStyle"
			></div>
			</div>
			</section>
			<section id="controls">
			<button @click="attackMonster">ATTACK</button>
			<button>SPECIAL ATTACK</button>
			<button>HEAL</button>
			<button>SURRENDER</button>
			</section>
			<section id="log" class="container">
			<h2>Battle Log</h2>
			<ul></ul>
			</section>
			</div>
			</body>
			</html>

New file
			@@ -0,0 +1,119 @@
			* {
			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);
			padding: 0.5rem;
			background-color: #880017;
			color: white;
			text-align: center;
			margin-bottom: 2rem;
			}

			section {
			width: 90%;
			max-width: 40rem;
			margin: auto;
			}

			.healthbar {
			width: 100%;
			height: 40px;
			border: 1px solid #575757;
			margin: 1rem 0;
			background: #fde5e5;
			}

			.healthbar__value {
			background-color: #00a876;
			width: 100%;
			height: 100%;
			}

			.container {
			text-align: center;
			padding: 0.5rem;
			margin: 1rem auto;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
			border-radius: 12px;
			}

			#monster h2,
			#player h2 {
			margin: 0.25rem;
			}

			#controls {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
			}

			button {
			font: inherit;
			border: 1px solid #88005b;
			background-color: #88005b;
			color: white;
			padding: 1rem 2rem;
			border-radius: 12px;
			margin: 1rem;
			width: 12rem;
			cursor: pointer;
			box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
			}

			button:focus {
			outline: none;
			}

			button:hover,
			button:active {
			background-color: #af0a78;
			border-color: #af0a78;
			box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.26);
			}

			button:disabled {
			background-color: #ccc;
			border-color: #ccc;
			box-shadow: none;
			color: #3f3f3f;
			cursor: not-allowed;
			}

			#log ul {
			list-style: none;
			margin: 0;
			padding: 0;
			}

			#log li {
			margin: 0.5rem 0;
			}

			.log--player {
			color: #7700ff;
			}

			.log--monster {
			color: #da8d00;
			}

			.log--damage {
			color: red;
			}

			.log--heal {
			color: green;
			}