Exercice 1

Résultat attendu pour l'exercice 1

1. Créer une nouvelle page Exercie1Page.vue et y coller le code suivant.

2. Créer une route /ex1 chargeant cette nouvelle page dans src/router/routes.js

3. Réaliser l'exercice en suivant les douze étapes placées au début du <template>

<template>
  <!--
  Exercice 1

  1) Créer les données (ref) name et age

  2) Reliez ces données aux deux champs de saisie <input /> correspondants

  3) Afficher le nom et l'âge dans le cadre beige <div class="description"> (première ligne en gras)

  4) Utilisez une propriété calculée pour afficher l'âge plus 10 ans (deuxième ligne en gras)

  5) Afficher le nombre de caractères du nom (troisième ligne en gras)

  6) Afficher le nom en majuscules (quatrième ligne en gras)

  7) N'affichez le cadre beige que si un nom et un âge valide ont été saisis.
     Sinon, affichez le cadre rouge <div class="no-details">

  8) Utilisez v-show pour afficher les messages d'erreur à côté des champs
     si le nom comporte plus de 15 caractères et l'âge dépasse 100 ans
     ou est plus petit que 1.

  9) Ajouter la classe CSS "error" aux champs de saisie s'ils enfreignent les mêmes règles

  10) Lorsque vous cliquez sur le bouton "Générer une personne",
      vous générez un nom aléatoire (à partir d'un tableau que vous créerez) et
      un âge aléatoire compris entre 1 et 100 ans.
      Ces nouvelles valeurs doivent être mise à jour partout dans la vue.

  11) Créer une directive qui donnera le focus au champ nom lors du chargement de la page

  12) Faites en sorte qu'une personne aléatoire soit générée lors du premier chargement de la page
  -->
  <q-page padding>
    <div className="form q-mb-lg">
      <div className="row q-mb-md">
        <label>Nom:</label>
        <input type="text">
        <label className="error">Maximum 15 caractères
        </label>
      </div>
      <div className="row q-mb-md">
        <label>Age:</label>
        <input type="number">
        <label className="error">Veuillez entrer un âge compris entre 1 et 100</label>
      </div>
      <div className="row">
        <button>Générer une personne</button>
      </div>
    </div>
    <div className="description q-mb-lg">
      <p>Mon nom est <b>Danny</b> et j'ai <b>36</b> ans.</p>
      <p>Dans 10 ans, j'aurai <b>46</b> ans.</p>
      <p>Mon nom se compose de <b>5</b> caractères.</p>
      <p>Mon nom en majuscules est <b>DANNY</b>.</p>
    </div>
    <div className="no-details">
      <p>Veuillez entrer un nom et un âge valide !</p>
    </div>
  </q-page>
</template>

<script setup>

</script>

<style lang="scss">
.form {
  background: #eee;
  padding: 10px;
}

label {
  min-width: 70px;
  
  &.error {
    font-size: 13px;
    color: red;
    margin-left: 5px;
    margin-top: 3px;
  }
}

input {
  border: 1px solid #ccc;
  
  &.error {
    border: 1px solid red;
    background: pink;
  }
}

.description {
  background: antiquewhite;
  padding: 20px 20px 7px;
}

.no-details {
  background: lightcoral;
  padding: 20px 20px 7px;
}
</style>