From 7783284353229af089627814071f20707b06d045 Mon Sep 17 00:00:00 2001
From: Cristiano Magro <cristiano.magro@vola.it>
Date: Thu, 26 Dec 2024 15:29:25 +0100
Subject: [PATCH] recupero lezioni precedenti
---
02 - basic/basics-03-events-starting-code/app.js | 13 ++
02 - basic/basics-assignment-2-problem/index.html | 37 +++++++++
02 - basic/basics-03-events-starting-code/index.html | 16 +++-
02 - basic/basics-05-using-the-native-event-object/app.js | 38 ++++++++-
02 - basic/basics-assignment-2-problem/app.js | 22 +++++
02 - basic/basics-assignment-2-problem/styles.css | 73 ++++++++++++++++++
02 - basic/basics-05-using-the-native-event-object/index.html | 8 +
7 files changed, 192 insertions(+), 15 deletions(-)
diff --git a/02 - basic/basics-03-events-starting-code/app.js b/02 - basic/basics-03-events-starting-code/app.js
index dc6d298..3ebded4 100644
--- a/02 - basic/basics-03-events-starting-code/app.js
+++ b/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;
diff --git a/02 - basic/basics-03-events-starting-code/index.html b/02 - basic/basics-03-events-starting-code/index.html
index d9e2c00..bdcb807 100644
--- a/02 - basic/basics-03-events-starting-code/index.html
+++ b/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>
diff --git a/02 - basic/basics-05-using-the-native-event-object/app.js b/02 - basic/basics-05-using-the-native-event-object/app.js
index 719c807..ce50ffe 100644
--- a/02 - basic/basics-05-using-the-native-event-object/app.js
+++ b/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");
diff --git a/02 - basic/basics-05-using-the-native-event-object/index.html b/02 - basic/basics-05-using-the-native-event-object/index.html
index e894f75..a379e7b 100644
--- a/02 - basic/basics-05-using-the-native-event-object/index.html
+++ b/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>
diff --git a/02 - basic/basics-assignment-2-problem/app.js b/02 - basic/basics-assignment-2-problem/app.js
new file mode 100644
index 0000000..d50d3ac
--- /dev/null
+++ b/02 - basic/basics-assignment-2-problem/app.js
@@ -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");
diff --git a/02 - basic/basics-assignment-2-problem/index.html b/02 - basic/basics-assignment-2-problem/index.html
new file mode 100644
index 0000000..28176bd
--- /dev/null
+++ b/02 - basic/basics-assignment-2-problem/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@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>
diff --git a/02 - basic/basics-assignment-2-problem/styles.css b/02 - basic/basics-assignment-2-problem/styles.css
new file mode 100644
index 0000000..6bed5b3
--- /dev/null
+++ b/02 - basic/basics-assignment-2-problem/styles.css
@@ -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);
+}
--
Gitblit v1.8.0