esecizio step 1 e step 2

Cristiano Magro

2024-12-30 bc995be0fbd1d9fce806a9280f91770d0d810675

esecizio step 1  e step 2

 07 - development setup/cmp-communication-assignment-problem/src/App.vue

New file
@@ -0,0 +1,108 @@
<template>

    <section>
        <header>
            Esercizio
        </header>
        <active-user :username="user.username" :age="user.age"></active-user>
        <user-data></user-data>
    </section>
</template>

<script>
export default {
    data() {
        return {
            user: {
                username: "mario",
                age: "38",
            }
        }
    }
}
</script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');

* {
    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 auto;
    border-radius: 10px;
    padding: 1rem;
    background-color: #58004d;
    color: white;
    text-align: center;
    width: 90%;
    max-width: 40rem;
}

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

#app li,
#app form {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
    margin: 1rem auto;
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    width: 90%;
    max-width: 40rem;
}

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

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

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

#app input {
    font: inherit;
    padding: 0.15rem;
}

#app label {
    font-weight: bold;
    margin-right: 1rem;
    width: 7rem;
    display: inline-block;
}

#app form div {
    margin: 1rem 0;
}
</style>

 07 - development setup/cmp-communication-assignment-problem/src/components/ActiveUser.vue

New file
@@ -0,0 +1,21 @@
<template>
    <div>
        <h2>Utente: {{ username }}</h2>
        <h3>Eta: {{ age }}</h3>
    </div>
</template>

<script>
export default {
    props: {
        username: {
            title: String,
            required: true
        },
        age: {
            title: String,
            required: true
        },
    }
}
</script>

 07 - development setup/cmp-communication-assignment-problem/src/components/UserData.vue

New file
@@ -0,0 +1,16 @@
<template>
    <div>
        <label>Utente: </label>
        <input type="text">
    </div>
    <div>
        <label>Eta: </label>
        <input type="text">
    </div>
</template>

<script>
export default {

}
</script>

 07 - development setup/cmp-communication-assignment-problem/src/main.js

@@ -1,6 +1,16 @@
import { createApp } from 'vue'

createApp({}).mount('#app')
import App from "./App.vue";
import ActiveUser from "./components/ActiveUser.vue";
import UserData from "./components/UserData.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: