udemy/corso-vue.git

parent: 948b23da | patch | commit | ignore whitespace

Cristiano Magro

2024-12-26 7783284353229af089627814071f20707b06d045

recupero lezioni precedenti

3 files added

4 files modified

	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

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

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