Skip to content

Si ce n'est pas terminé, compléter le devoir de la semaine 3 avant de commencer celui-ci.

Devoir - Semaine 4 Formulaire, événement et DOM ​

Fini la calculatrice! 🎉

Instructions ​

Voici ce qui est demandé pour ce devoir :

  • CrĂ©er une page web simple avec un titre et un formulaire HTML utilisant bootstrap. Le formulaire doit contenir les champs suivants :
    • Nom (champ texte)
    • PrĂ©nom (champ texte)
    • Adresse e-mail (champ texte)
    • Mot de passe (champ mot de passe)
    • Confirmer le mot de passe (champ mot de passe)
    • Un bouton de soumission
  • Utiliser le DOM et les Ă©vĂ©nements pour gĂ©rer la validation des champs avant la soumission du formulaire. Si une validation Ă©choue, afficher un message d'erreur appropriĂ© sous le champ concernĂ© (ajout/suppression d'un Ă©lĂ©ment HTML). Voici les validations Ă  effectuer :
    • VĂ©rifier que l'adresse e-mail est dans un format correct. Pour faire simple, seulement vĂ©rifier la prĂ©sence du caractère @ (nous allons voir le reste en dĂ©tail plus tard).
    • VĂ©rifier que le mot de passe et la confirmation du mot de passe correspondent.
  • Lors de la soumission du formulaire :
    • VĂ©rifier que tous les champs sont remplis.
  • Si toutes les validations passent, ajoutez un Ă©lĂ©ment <p> sous le formulaire avec un message de succès indiquant que le formulaire a Ă©tĂ© soumis avec succès. Assurez-vous d'enlever ce message après 5 secondes.

Pour le style, utilisez bootstrap pour la mise en page et le style de base. Assurez-vous d'inclure les éléments suivants:

  • Une nav-bar contenant le nom de votre application, un logo et un lien vers la page d'accueil.
  • Un footer simple contenant votre nom, le sigle du cours et l'annĂ©e en cours.
  • Dans une section de paramĂ©trage, un bouton permettant de changer la couleur de fond de la page. (vous pouvez choisir les couleurs que vous voulez)
  • Dans une section de paramĂ©trage, un bouton permettant de changer les paramètres de la police du titre, c'est-Ă -dire la taille, la couleur et la famille de police. (vous pouvez choisir les options que vous voulez)

Remise ​

Il s'agit d'un devoir formatif et nous y reviendrons ensemble en classe lors du prochain cours.

420-2W1-DM - Développement d'applications web 2