- Dans un premier temps, testez l'application : les fonctionnalités d'ajout et de suppression d'une commande, de recherche et d'envoi d'un message sont implémentées. Puis regardez le code, notamment les fichiers
index.html et js/interactions.js.
- Ouvrez la console du navigateur pour lire les messages (information, erreurs, etc.) qui vous aideront à débugger votre code Javascript.
- Remplacez le nom du site (panergo) par le nom de votre choix.
- Le tableau des commandes n'est pas très esthétique. Utilisez les classes Bootstrap pour le rendre responsive, avec des lignes zébrées et une couleur différente pour la ligne survolée.
- Remplacez la liste de description des paniers par des panels (cards), selon le modèle ci-dessous. Utilisez une grille pour les agencer correctement (3 panels par rangée).
- Dans le formulaire d'ajout d'une commande, mettez le texte d'aide du champ "produit à remplacer" dans une infobulle. Associez une icône pertinente à l'infobulle.
- Dans le navigateur, lancez la vue adaptative (sous Firefox, Outils > Développement web > Vue adaptative) et testez plusieurs dispositifs. Que constatez-vous au niveau de la barre de menus ? Programmez le repli du menu pour les petits dispositifs.
- Si on lance une recherche sans saisir de mot-clé, un message d'erreur apparait en noir sous la zone de recherche. Utilisez les classes Bootstrap pertinentes pour que ce message d'erreur soit écrit en rouge (mais pas le nombre d'occurrences trouvées !).
- Dans le formulaire d'ajout, indiquez les champs obligatoires par des astérisques (en exposant et en rouge). Une solution consiste à récupérer les labels concernés par la méthode
querySelectorAll(...), en prenant soin d'exclure le champ produit à remplacer qui n'est pas obligatoire.
- Quand on envoie un message via le formulaire de contact, une notification indique si le message est bien envoyé ou s'il y a une erreur. Utilisez une alerte Bootstrap pour afficher cette notification soit en vert (succès), soit en rouge (erreur). Profitez-en pour ajouter une vérification du format de l'adresse email.
- Le type de panier Légufruits a une taille unique. Dans la fenêtre modale d'ajout, lorsque l'on sélectionne le type Légufruits, désactivez les boutonns radio de choix de taille. Pensez à les réactiver si le type Légufruits n'est plus sélectionné.
- Ajoutez une demande de confirmation avant de supprimer une commande, en utilisant une fenêtre (jaillissante) modale.
- Programmez la fonction
editElement() pour qu'elle permette de modifier une commande. Inspirez vous de l'ajout et également de la suppression (pour trouver la bonne ligne).