6 - Formatif


À partir du code HTML de départ, implémenter les actions CRUD pour une application de recensement d’une population(prénom, nom et âge).

  • Vous pouvez intégrer le mécanisme de template si vous le désirez. Aussi, vous pouvez utiliser l'édition inline ou le formulaire d'ajout pour implémenter la modification.
  • Assurez-vous de respecter les bonnes pratiques de programmation en matière de nomenclature et organisation du code.
    • Vous pouvez ajouter des identifiants, classes ou nom dans le code fourni pour faciliter les manipulation du DOM.

Ajout

  • Le prénom, le nom et l'âge sont obligatoire
  • La liste déroulante affiche les 100 dernières années pour calculer l’âge approximatif de l’individu
  • On peut soumettre les données via le bouton Ajouter ou la toucher Enter
    • L'ajout insère l'individu sur une nouvelle ligne à la fin du tableau
  • Le formulaire est réinitialisé après l’ajout

Liste

  • Un paragraphe est affiché s'il n'y a aucuns items, sinon on affiche le tableau
  • La liste affiche toutes les informations de chaque individu
  • Le prénom et le nom sont affiché tel quel
  • L’âge est calculé à partir de l’année de naissance fournie.
    Si l’âge est inférieur à 50 le texte est vert, sinon il est rouge
  • Les bouton Modifier et Supprimer affectent l'item correspondant

Suppression

  • Retire l’individu de la liste, après une confirmation de l'utilisateur

Modification

  • Le formulaire affiche les données actuelles de l'item
  • L’âge doit être converti en année de naissance pour être manipulé à partir de la liste déroulante
  • Le prénom, le nom et l'âge sont obligatoires pour confirmer la modification
  • On peut annuler une modification sans affecter les données

Exemple