Résumé de section

    • Examen de mi-session Devoir

      À partir du fichier html joint, créer la page accueil.html. Vous remettrez votre fichier html seul.

      Dans la balise <script>, placer le code JS utile

      1 - Créer le menu à partir de l'objet menu (cible = target !) dans menu-header (25%)

      {menus:[

      {nom:accueil,url:accueil.html,cible:0},

      {nom:utilisateurs,url:users.html,cible:1},

      {nom:faq,url:faq.html,cible:0},

      ]}

      2 - Créer un formulaire d'adresse (25%) : nom de l'adresse, rue (2 inputs, la seconde est optionnelle), code postal, ville, choix de la province (liste déroulante) Québec, Nouvelle-Écosse, Ontario.

      Une case à cocher permet de dire qu'elle est l'adresse principale.

      Une case à cocher doit obligatoirement être cochée pour signifier l'acceptation de l'enregistrement de l'information

      Un bouton de validation vérifie que toutes les infos sont renseignées. Les validations informent l'utilisateur de telle ou telle chose manquante : une alert, un texte en rouge, ... À vous de choisir.

      Chaque input doit avoir une ID, un name, une value et un label. Vous pouvez vous inspirer des formulaires Bootstrap.

      3 - Créer un tableau à partir des données suivantes (25%)

      Prénom Nom Age Genre numéro ID Courriel
      Mia Gagnon 22 f MG01 Mia.Gagnon@courriel.qc.ca
      Eleanor Côté 32 f EC03 Eleanor.Côté@courriel.qc.ca
      Ava Bouchard 65 f AB04 Ava.Bouchard@courriel.qc.ca
      Theo Simard 54 m TS18 Theo.Simard@courriel.qc.ca
      Jack Boucher 18 m JB19 Jack.Boucher@courriel.qc.ca
      Aiden Tremblay 22 m AT20 Aiden.Tremblay@courriel.qc.ca
      Ryan Gagnon 16 m RG21 Ryan.Gagnon@courriel.qc.ca
      Ethan Roy 59 m ER22 Ethan.Roy@courriel.qc.ca

      Si la personne est de genre "f", (voir ici) son icône sera ici, si "m" ici
      Si son âge est inférieur à 18, son âge sera en bleu (css : blue), entre 18 et 60 inclus, bleu (css : blue), au-delà gris (css : gris)
      Les données du tableau sont intégrées à partir d'un objet JS (à créer) sous la forme :
      {users:[
      {nom:xxx,prenom:yyy,age:00,courriel:aaa@aaa.aa,genre:x},
      {nom:xxx,prenom:yyy,age:00,courriel:aaa@aaa.aa,genre:x},
      ...
      ]}

      10% sont accordés aux commentaires du code : utile, pertinent
      15% sont accordés à l'efficience du code : clarté, indentation, concision, réutilisation des fonctions

      Vous n'avez pas le droit de communiquer entre vous. Il n'est jamais interdit de poser une question mais je ne répondrai pas si vous devez connaître ou rechercher la réponse.