esercizio sistemazione style

Cristiano Magro

2024-12-30 05275d80c65c82fd9be1e7137af8514aff9dbbc2

esercizio sistemazione style

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

@@ -55,13 +55,6 @@
    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;
@@ -74,19 +67,19 @@

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

#app button {
    font: inherit;
    cursor: pointer;
    border: 1px solid #ff0077;
    background-color: #ff0077;
    border: 1px solid #08301a;
    background-color: #08301a;
    color: white;
    padding: 0.05rem 1rem;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);
    border-radius: 10px;
}

#app button:hover,
@@ -111,4 +104,15 @@
#app form div {
    margin: 1rem 0;
}

#app .user{
    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;

}
</style>

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

@@ -1,5 +1,5 @@
<template>
    <div>
    <div class="user">
        <h2>Utente: {{ username }}</h2>
        <h3>Eta: {{ age }}</h3>
    </div>

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

@@ -1,37 +1,36 @@
<template>
    <form @submit.prevent="submitData">
    <div>
        <label>Utente: </label>
        <input type="text" v-model="username">
    </div>
    <div>
        <label>Eta: </label>
        <input type="text" v-model="age">
    </div>
    <div>
        <button>Update</button>
    </div>
</form>
        <div>
            <label>Utente: </label>
            <input type="text" v-model="username">
        </div>
        <div>
            <label>Eta: </label>
            <input type="text" v-model="age">
        </div>
        <div>
            <button>Update</button>
        </div>
    </form>
</template>

<script>
export default {
    data(){
    data() {
        return {
            username: "",
            age: "",
        }
    },
    emits: ['update-user'],
    methods:{
    methods: {
        submitData() {

            if(this.username !== "" && this.age !== ""){

            this.$emit('update-user', this.username, this.age);
            if (this.username !== "" && this.age !== "") {
                this.$emit('update-user', this.username, this.age);
            } else {
                alert("insert data")
            } 
                alert("insert data");
            }

        }
    }