From c65c4fb21f23d097188dcc941c04b4b6ee72381b Mon Sep 17 00:00:00 2001
From: Cristiano Magro <cristiano.magro@vola.it>
Date: Mon, 30 Dec 2024 20:14:38 +0100
Subject: [PATCH] spostato cartella lezione 08
---
08 - component communication/cmp-communication-assignment-problem/HOW-TO-USE.pdf | 0
08 - component communication/cmp-communication-assignment-solution/HOW-TO-USE.pdf | 0
08 - component communication/cmp-communication-assignment-problem/src/App.vue | 0
08 - component communication/cmp-communication-assignment-solution/.gitignore | 0
08 - component communication/cmp-communication-assignment-problem/src/components/UserData.vue | 0
08 - component communication/cmp-communication-assignment-solution/.browserslistrc | 0
08 - component communication/cmp-communication-assignment-problem/package-lock.json | 0
08 - component communication/cmp-communication-assignment-problem/public/favicon.ico | 0
08 - component communication/cmp-communication-assignment-solution/public/favicon.ico | 0
08 - component communication/cmp-communication-assignment-solution/package.json | 0
08 - component communication/cmp-communication-assignment-problem/package.json | 0
08 - component communication/cmp-communication-assignment-problem/public/index.html | 0
08 - component communication/cmp-communication-assignment-solution/src/components/ActiveUser.vue | 21 ++++++++++
08 - component communication/cmp-communication-assignment-problem/.eslintrc.js | 0
08 - component communication/cmp-communication-assignment-solution/src/App.vue | 42 +++++++++++++++++++++
08 - component communication/cmp-communication-assignment-problem/.gitignore | 0
08 - component communication/cmp-communication-assignment-solution/public/index.html | 0
08 - component communication/cmp-communication-assignment-problem/src/components/ActiveUser.vue | 0
08 - component communication/cmp-communication-assignment-problem/src/main.js | 0
08 - component communication/cmp-communication-assignment-problem/.browserslistrc | 0
08 - component communication/cmp-communication-assignment-problem/babel.config.js | 0
08 - component communication/cmp-communication-assignment-solution/src/components/UserData.vue | 26 +++++++++++++
08 - component communication/cmp-communication-assignment-solution/babel.config.js | 0
08 - component communication/cmp-communication-assignment-solution/src/main.js | 25 ++++++++++++
08 - component communication/cmp-communication-assignment-solution/.eslintrc.js | 0
25 files changed, 114 insertions(+), 0 deletions(-)
diff --git a/07 - development setup/cmp-communication-assignment-problem/.browserslistrc b/08 - component communication/cmp-communication-assignment-problem/.browserslistrc
similarity index 100%
rename from 07 - development setup/cmp-communication-assignment-problem/.browserslistrc
rename to 08 - component communication/cmp-communication-assignment-problem/.browserslistrc
diff --git a/07 - development setup/cmp-communication-assignment-problem/.eslintrc.js b/08 - component communication/cmp-communication-assignment-problem/.eslintrc.js
similarity index 100%
rename from 07 - development setup/cmp-communication-assignment-problem/.eslintrc.js
rename to 08 - component communication/cmp-communication-assignment-problem/.eslintrc.js
diff --git a/07 - development setup/cmp-communication-assignment-problem/.gitignore b/08 - component communication/cmp-communication-assignment-problem/.gitignore
similarity index 100%
rename from 07 - development setup/cmp-communication-assignment-problem/.gitignore
rename to 08 - component communication/cmp-communication-assignment-problem/.gitignore
diff --git a/07 - development setup/cmp-communication-assignment-problem/HOW-TO-USE.pdf b/08 - component communication/cmp-communication-assignment-problem/HOW-TO-USE.pdf
similarity index 100%
rename from 07 - development setup/cmp-communication-assignment-problem/HOW-TO-USE.pdf
rename to 08 - component communication/cmp-communication-assignment-problem/HOW-TO-USE.pdf
Binary files differ
diff --git a/07 - development setup/cmp-communication-assignment-problem/babel.config.js b/08 - component communication/cmp-communication-assignment-problem/babel.config.js
similarity index 100%
rename from 07 - development setup/cmp-communication-assignment-problem/babel.config.js
rename to 08 - component communication/cmp-communication-assignment-problem/babel.config.js
diff --git a/07 - development setup/cmp-communication-assignment-problem/package-lock.json b/08 - component communication/cmp-communication-assignment-problem/package-lock.json
similarity index 100%
rename from 07 - development setup/cmp-communication-assignment-problem/package-lock.json
rename to 08 - component communication/cmp-communication-assignment-problem/package-lock.json
diff --git a/07 - development setup/cmp-communication-assignment-problem/package.json b/08 - component communication/cmp-communication-assignment-problem/package.json
similarity index 100%
rename from 07 - development setup/cmp-communication-assignment-problem/package.json
rename to 08 - component communication/cmp-communication-assignment-problem/package.json
diff --git a/07 - development setup/cmp-communication-assignment-problem/public/favicon.ico b/08 - component communication/cmp-communication-assignment-problem/public/favicon.ico
similarity index 100%
rename from 07 - development setup/cmp-communication-assignment-problem/public/favicon.ico
rename to 08 - component communication/cmp-communication-assignment-problem/public/favicon.ico
Binary files differ
diff --git a/07 - development setup/cmp-communication-assignment-problem/public/index.html b/08 - component communication/cmp-communication-assignment-problem/public/index.html
similarity index 100%
rename from 07 - development setup/cmp-communication-assignment-problem/public/index.html
rename to 08 - component communication/cmp-communication-assignment-problem/public/index.html
diff --git a/07 - development setup/cmp-communication-assignment-problem/src/App.vue b/08 - component communication/cmp-communication-assignment-problem/src/App.vue
similarity index 100%
rename from 07 - development setup/cmp-communication-assignment-problem/src/App.vue
rename to 08 - component communication/cmp-communication-assignment-problem/src/App.vue
diff --git a/07 - development setup/cmp-communication-assignment-problem/src/components/ActiveUser.vue b/08 - component communication/cmp-communication-assignment-problem/src/components/ActiveUser.vue
similarity index 100%
rename from 07 - development setup/cmp-communication-assignment-problem/src/components/ActiveUser.vue
rename to 08 - component communication/cmp-communication-assignment-problem/src/components/ActiveUser.vue
diff --git a/07 - development setup/cmp-communication-assignment-problem/src/components/UserData.vue b/08 - component communication/cmp-communication-assignment-problem/src/components/UserData.vue
similarity index 100%
rename from 07 - development setup/cmp-communication-assignment-problem/src/components/UserData.vue
rename to 08 - component communication/cmp-communication-assignment-problem/src/components/UserData.vue
diff --git a/07 - development setup/cmp-communication-assignment-problem/src/main.js b/08 - component communication/cmp-communication-assignment-problem/src/main.js
similarity index 100%
rename from 07 - development setup/cmp-communication-assignment-problem/src/main.js
rename to 08 - component communication/cmp-communication-assignment-problem/src/main.js
diff --git a/07 - development setup/cmp-communication-assignment-problem/.browserslistrc b/08 - component communication/cmp-communication-assignment-solution/.browserslistrc
similarity index 100%
copy from 07 - development setup/cmp-communication-assignment-problem/.browserslistrc
copy to 08 - component communication/cmp-communication-assignment-solution/.browserslistrc
diff --git a/07 - development setup/cmp-communication-assignment-problem/.eslintrc.js b/08 - component communication/cmp-communication-assignment-solution/.eslintrc.js
similarity index 100%
copy from 07 - development setup/cmp-communication-assignment-problem/.eslintrc.js
copy to 08 - component communication/cmp-communication-assignment-solution/.eslintrc.js
diff --git a/07 - development setup/cmp-communication-assignment-problem/.gitignore b/08 - component communication/cmp-communication-assignment-solution/.gitignore
similarity index 100%
copy from 07 - development setup/cmp-communication-assignment-problem/.gitignore
copy to 08 - component communication/cmp-communication-assignment-solution/.gitignore
diff --git a/07 - development setup/cmp-communication-assignment-problem/HOW-TO-USE.pdf b/08 - component communication/cmp-communication-assignment-solution/HOW-TO-USE.pdf
similarity index 100%
copy from 07 - development setup/cmp-communication-assignment-problem/HOW-TO-USE.pdf
copy to 08 - component communication/cmp-communication-assignment-solution/HOW-TO-USE.pdf
Binary files differ
diff --git a/07 - development setup/cmp-communication-assignment-problem/babel.config.js b/08 - component communication/cmp-communication-assignment-solution/babel.config.js
similarity index 100%
copy from 07 - development setup/cmp-communication-assignment-problem/babel.config.js
copy to 08 - component communication/cmp-communication-assignment-solution/babel.config.js
diff --git a/07 - development setup/cmp-communication-assignment-problem/package.json b/08 - component communication/cmp-communication-assignment-solution/package.json
similarity index 100%
copy from 07 - development setup/cmp-communication-assignment-problem/package.json
copy to 08 - component communication/cmp-communication-assignment-solution/package.json
diff --git a/07 - development setup/cmp-communication-assignment-problem/public/favicon.ico b/08 - component communication/cmp-communication-assignment-solution/public/favicon.ico
similarity index 100%
copy from 07 - development setup/cmp-communication-assignment-problem/public/favicon.ico
copy to 08 - component communication/cmp-communication-assignment-solution/public/favicon.ico
Binary files differ
diff --git a/07 - development setup/cmp-communication-assignment-problem/public/index.html b/08 - component communication/cmp-communication-assignment-solution/public/index.html
similarity index 100%
copy from 07 - development setup/cmp-communication-assignment-problem/public/index.html
copy to 08 - component communication/cmp-communication-assignment-solution/public/index.html
diff --git a/08 - component communication/cmp-communication-assignment-solution/src/App.vue b/08 - component communication/cmp-communication-assignment-solution/src/App.vue
new file mode 100644
index 0000000..8567b0e
--- /dev/null
+++ b/08 - component communication/cmp-communication-assignment-solution/src/App.vue
@@ -0,0 +1,42 @@
+<template>
+ <div>
+ <active-user :username="user.name" :userage="user.age"></active-user>
+ <user-data @set-data="setUserData"></user-data>
+ </div>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ user: {
+ name: "Max Schwarzmüller",
+ age: 31,
+ },
+ };
+ },
+ methods: {
+ setUserData(name, age) {
+ this.user = {
+ name: name,
+ age: +age
+ };
+ }
+ }
+};
+</script>
+
+
+<style>
+html {
+ font-family: sans-serif;
+}
+
+section {
+ margin: 2rem auto;
+ max-width: 40rem;
+ border-radius: 12px;
+ border: 1px solid #ccc;
+ padding: 1rem;
+}
+</style>
\ No newline at end of file
diff --git a/08 - component communication/cmp-communication-assignment-solution/src/components/ActiveUser.vue b/08 - component communication/cmp-communication-assignment-solution/src/components/ActiveUser.vue
new file mode 100644
index 0000000..6395a92
--- /dev/null
+++ b/08 - component communication/cmp-communication-assignment-solution/src/components/ActiveUser.vue
@@ -0,0 +1,21 @@
+<template>
+ <section>
+ <h2>{{ username }}</h2>
+ <h3>{{ userage }} Years</h3>
+ </section>
+</template>
+
+<script>
+export default {
+ props: {
+ username: {
+ type: String,
+ required: true
+ },
+ userage: {
+ type: Number,
+ required: true
+ }
+ }
+};
+</script>
diff --git a/08 - component communication/cmp-communication-assignment-solution/src/components/UserData.vue b/08 - component communication/cmp-communication-assignment-solution/src/components/UserData.vue
new file mode 100644
index 0000000..25017d1
--- /dev/null
+++ b/08 - component communication/cmp-communication-assignment-solution/src/components/UserData.vue
@@ -0,0 +1,26 @@
+<template>
+ <section>
+ <form @submit.prevent="submitData">
+ <input type="text" placeholder="Your name" v-model="enteredName" />
+ <input type="text" placeholder="Your age" v-model="enteredAge" />
+ <button>Set User Data</button>
+ </form>
+ </section>
+</template>
+
+<script>
+export default {
+ emits: ['set-data'],
+ data() {
+ return {
+ enteredName: "",
+ enteredAge: "",
+ };
+ },
+ methods: {
+ submitData() {
+ this.$emit('set-data', this.enteredName, this.enteredAge);
+ }
+ }
+};
+</script>
\ No newline at end of file
diff --git a/08 - component communication/cmp-communication-assignment-solution/src/main.js b/08 - component communication/cmp-communication-assignment-solution/src/main.js
new file mode 100644
index 0000000..3e32815
--- /dev/null
+++ b/08 - component communication/cmp-communication-assignment-solution/src/main.js
@@ -0,0 +1,25 @@
+import { createApp } from 'vue';
+
+import ActiveUser from './components/ActiveUser.vue';
+import UserData from './components/UserData.vue';
+import App from './App.vue';
+
+const app = createApp(App);
+
+app.component('active-user', ActiveUser);
+app.component('user-data', UserData);
+
+app.mount('#app');
+
+// Task 1:
+// Add two components to the app:
+// An ActiveUser component and an UserData component
+// ActiveUser should output a username (h2) and age (h3)
+// UserData should output two input fields => for name and age
+// Optional: Add styling of your choice
+
+// Task 2: Output both components side-by-side in your main App template
+
+// Task 3: Add user data and ensure it contains a name and age
+// User data should be output in ActiveUser
+// It should be updated via the UserData component
--
Gitblit v1.8.0