Travail pratique #4¶

Travail pratique à remettre

Ce travail pratique est à remettre et compte dans le cumul de la note finale du cours.

Pondération : 5% de la session

Détails :
- Ce travail peut être fait en équipe de 2
- Bien lire les instructions
- Valider le code avec le validateur avant la remise
- La remise se fait sur LÉA
- La date limite de remise est disponible sur LÉA

Ce travail met en pratique :

La création de formulaires web avec Bootstrap
Le traitement de formulaires par Javascript

Notes de cours

Rappelez-vous que les notes de cours contiennent des exemples des éléments demandés...

Et que les démos envoyés sur LÉA offrent toujours les démonstrations faites en classe.

Le projet¶

Télécharger le projet

Extraire le projet du dossier ZIP et le conserver dans votre espace de travail.

Le projet a déjà la bonne structure. Il suffit d'ajouter les portions manquantes dans les bons fichiers.

N'oubliez pas d'indiquer votre/vos noms complets dans la balise d'auteur

Aucun CSS autre que celui fourni n'est nécessaire pour ce TP

Compléter le projet¶

Ce travail consiste à mettre en pratique :

La création de formulaires HTML
La mise en page de formulaires avec Bootstrap
Le traitement Javascript de formulaires

Exemple de l'interface complétée :

Étape 1 : les formulaires HTML et Bootstrap¶

L'interface comprend 2 formulaires délimités avec une balise <form>.

Trouver le formulaire demandé
Compléter le formulaire à l'aide du HTML et de Bootstrap

Formulaire de création de cornet¶

Le premier formulaire possède l'ID constructeurCornet.

Pour les deux premiers boutons radio
1. Lier chaque libellé à son bouton radio (on peut alors cliquer sur le libellé pour cocher le bouton radio)
2. Rendre les deux bouton radio mutuellement exclusifs (un seul peut être coché à la fois)
3. Faire en sorte que le choix "Cornet de crème glacée" soit coché par défaut
4. Appliquer Bootstrap sur les champs et leur libellé (si la documentation exige l'ajout de div, ajoutez-les)
Dans la div ayant l'ID zoneAjouts
1. Créer 4 blocs de case à cocher tel que Bootstrap le recommande
2. Chaque case à cocher doit avoir un id du même nom que l'image décrite par l'option
  - sauce au chocolat : sauce_choco
  - sauce au caramel : sauce_caramel
  - bonbons : bonbons
  - cerise : cerise

TP4

Formulaire de commande¶

Dans le formulaire ayant l'id info_commande, créer les éléments suivants :

TP4

Utiliser le système de grille de Bootstrap pour afficher en 2 colonnes
Bloc avec ID infoContact contient les champs email et téléphone
Le pattern pour le champ téléphone est pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
La case à cocher "J'accepte" doit avoir un attribut name="acceptAds"
Le champs courriel doit avoir un attribut name="courriel"
Le champs téléphone doit avoir un attribut name="telephone"

Le Javascript¶

Maintenant que l'interface est prête, nous allons programmer les fonctionnalités.

Nous allons écrire deux scripts pour ce projet :

constructeurCornet.js : traite le formulaire de création de cornet
commande.js : traite le formulaire de commande

commande.js¶

Ce script est troué et manque des lignes.

Suivre les instructions pour le compléter.

Dans le HTML, avant la fin du body, appeler le script commande.js.
Dans le HTML, sur la case à cocher "J'accepte de recevoir des messages de promotion"
- Sur l'événement onchange appeler la fonction afficherInfoContact
- Dans le script, déclarer la fonction puis lui donner une ligne de code :
```
// Active/désactive la classe d-none sur l'élément de la page ayant l'id infoContact
document.getElementById("infoContact").classList.toggle("d-none");
```
Tester :

Lorsque la case à cocher est cochée, le courriel et le téléphone sont visibles.

Lorsque la case à cocher est décochée, le courriel et le téléphone sont cachés.

La fonction initialiserChamps existe déjà dans le script.

Le bouton Recommencer doit appeler cette fonction sur le click.
La fonction a besoin de recevoir quel formulaire doit être réinitialisé... Le paramètre à passer à la fonction est this.form.
- this : la balise qui appelle la fonction
- .form : le formulaire dans lequel la baslise se trouve
Modification Échanger effacerOptions() pour initialiserCornet()

Ceci dépend de la version du projet que vos avez
Modification Échanger blocAjouts.classList.toggle("d-none"); pour blocAjouts.classList.remove("d-none");

Ceci dépend de la version du projet que vos avez
Tester :

Lorsqu'on clique sur le bouton Recommencer, les champs de commande s'effacent, la case à cocher se coche et les champs courriel et téléphone apparaissent s'ils étaient cachés.

Le bouton Soumettre appelle la fonction soumettreCommande.

Ajouter dans le bouton l'événement onclick qui appelle la fonction.
Dans le script, déclarer la fonction.
Le code de la fonction à écrire est le suivant :
1. Conserver dans une variable le formulaire info_commande avec getElementById
2. Appeler la fonction validerFormulaire et lui passer la variable contenant le formulaire en paramètre. Si elle retourne false arrêter le traitement avec un return.
3. Lire le prénom et le nom du client.
4. Utiliser un alert pour afficher un message construit avec le prénom et nom du client.
  
  Exemple :
```
let message = `Merci ${nom} votre commande a bien été reçue. \n Votre numéro de client est le ${compteurClients} \n Lorsque votre commande sera prête, votre numéro sera appelé par notre expert glacier.`;

alert(message);
```
5. Ajouter 1 au compteur de clients (variable globale déjà déclarée au haut du script)
6. Appeler la fonction initialiserChamps avec le formulaire en paramètre
Tester :
- soumettre avec prénom et nom vides: demande à remplir les champs et n'affiche pas le message
- soumettre avec prénom et nom fourni, case cochée, email et téléphone vide : demande de fournir un email ou un téléphone
- soumettre avec case décochée: affiche le message si nom et prénom sont remplis
- soumettre avec case cochée et au moins le email ou le téléphone : affiche le message si nom et prénom sont remplis

constructeurCornet.js¶

Dans le HTML, avant la fin du body, appeler le script constructeurCornet.js.

Ce script permet de construire l'image du cornet dès qu'on ajoute un choix.

Ainsi, les événements sont appelés lorsque les champs changent de valeur et non sur le clic d'un bouton.

Sur les boutons radio : événement onchange appelle la fonction changerChoix
Sur la liste déroulante : événement onchange appelle la fonction afficherCornet
Sur les cases à cocher : l'événement onchange appelle la fonction ajouterOption
Sur le bouton recommencer de type reset : l'événement onclick appelle la fonction initialiserCornet

Ajouter ces événements aux bons endroits.

Bouton recommencer de la zone cornet

On doit s'assurer que l'image de cornet soit réinitialisée en plus des champs du formulaire.

Sur le clic du bouton, appeler la fonction initialiserCornet()

Dans la fonction, ajouter les lignes de code suivantes :

1. Trouve l'élément ayant l'id  `cornet`
2. Change sa source pour `img/cornet_vide.png`
3. Supprime toutes les balises enfant de la balide ayant l'id `zoneCornet` (replaceChildren)
4. Remet la balise enfant dans la zoneCornet avec appendChild()
5. Retire la classe `d-none` de la div `blocAjouts`

Tester :

Sur click du bouton, le formulaire se réinitialise, la zone d'image affiche le cornet vide, même lorsque le dernier choix était popscicle

Liste déroulante

Appelle la fonction afficherCornet.

Dans le script constructeurCornet.js, déclarer la fonction
Dans la fonction, trouver et conserver dans une variable l'élément ayant l'id cornet
Si la valeur (value) de l'élément avec l'id saveurBase est "aucun"
- Changer la source de l'image cornet pour cornet_vide.png
- appeler la fonction effacerOptions()
Sinon :
- Lire la valeur de l'élément saveurBase
- Changer la source de l'image cornet pour cornet_ + valeur de saveurBase + .png
Tester :
- Quand on choisi une saveur de crème glacée : l'image change pour représenter la saveur
- Quand on choisi aucun : l'image affiche un cornet vide

Cases à cocher de création de cornet

Toutes les cases à cocher appellent la fonction ajouterOption sur l'événement onchange
La fonction doit recevoir en paramètre l'id de la balise qui l'appelle

Tester :

une case cochée fait apparaître une image de l'option choisie
décocher la case efface l'image de cet ingrédient

Défi et bonus¶

Voici l'occasion d'obtenir un point bonus !

Si les prix de base sont les suivants :
- cornet : 2$
- popscicle : 4$
Si chaque option d'une case à cocher vaut 0.50$ lorsque sélectionnée
Si les saveurs de crème glacée Orange et Pistache coûtent 1$ de plus

✏ Lorsque la commande est soumise, après avoir affiché le message de réception de la commande :

Ajouter dans la page web le prix total de la commande. Attention: ne pas afficher avec un alert !

Ne pas utiliser de variables globales (pas de variable déclarée hors fonction) !

Appeler une autre fonction pour exécuter ce traitement (voir notes de cours).

Ce point bonus est corrigé à la méthode "tout ou rien" : on a le point ou on l'a pas.

Valider et corriger¶

Valider le code à l'aide du validateur.

Validateur HTML

S'il reste des erreurs, on perd automatiquement des points!

Assurez-vous que votre code respecte les règles de programmation !

Avez-vous respecté les normes de présentation du code ?

Avez-vous ajouté les commentaires aux bons endroits ?

Avez-vous donné des noms significatifs à vos variables ?

Standards

Règles HTML

Règles Javascript

Si les règles ne sont pas respectées, on perd des points!

Barème de correction¶

Élément de correction	points
Règles de programmation	1 pt
Formulaire de création de cornet (HTML + Bootstrap)	2 pts
Formulaire de commande (HTML + Bootstrap)	2 pts
Script de création de cornet	5 pts
Script de commande	4 pts
Validation du code	1 pt
TOTAL:	15 pts ramenés sur 5% session
BONUS:	1 point

Remise¶

La remise se fait sur LÉA à l'aide d'un dossier ZIP.

Date limite de remise affichée sur LÉA.

Deux périodes de laboratoires sont allouées pour ce travail.