JAVASCRIPT PRACTICE LAB 3
Contexte : Application de Gestion des Commandes pour un
Restaurant
Cette application est un outil simple pour gérer les commandes dans un restaurant. L'objectif
est de permettre au personnel de :
1. Ajouter des commandes en indiquant le nom du plat et son prix.
2. Marquer les commandes comme "servies" une fois qu'elles sont apportées aux clients.
3. Voir un résumé indiquant le nombre total de commandes, le nombre de commandes
servies, et le montant total des commandes servies en dirhams (DH).
4. Filtrer les commandes pour afficher uniquement celles qui sont servies ou toutes les
commandes.
Exercice 1 : Créer la Structure de Base pour les Commandes
But : Mettre en place l’interface où le personnel peut ajouter une commande avec le nom du
plat et son prix.
Étapes
1. Créez une div qui contiendra toute l'application. Dans cette div :
o Ajoutez un titre (h1) avec le texte "Gestion des Commandes".
o Ajoutez un champ de texte (input type="text") pour entrer le nom du plat.
o Ajoutez un champ numérique (input type="number") pour entrer le prix du plat
(en dirhams).
o Ajoutez un bouton "Ajouter Commande", qui permettra de valider l'ajout de la
commande.
o Ajoutez une liste (ul) vide où les commandes seront affichées.
Fonctionnalité
• Créez une fonction addOrder(dishName, dishPrice) qui prendra en paramètre le nom
du plat (dishName) et le prix du plat (dishPrice). Cette fonction va :
o Créer un nouvel élément de commande (li) et l’ajouter à la liste.
o Afficher le nom du plat et son prix dans chaque commande.
Exemple
En appelant addOrder("Pizza Margherita", 70), une commande s’affiche dans la liste
avec le texte : Pizza Margherita - 70 DH.
Exercice 2 : Marquer une Commande comme "Servie"
But : Permettre de marquer les commandes comme "servies" pour indiquer que le plat a été
apporté au client.
Étapes
1. Modifiez la fonction addOrder pour que chaque commande ait une case à cocher
(checkbox) à côté d’elle. Cela permettra de marquer une commande comme "servie" en
cochant cette case.
2. Ajoutez un booléen (isServed) qui est false au départ (la commande n'est pas encore
servie).
Fonctionnalité
• La case à cocher change l’état de la commande :
o Si la case est cochée, le booléen isServed passe à true, et une classe CSS served
est appliquée pour afficher la commande comme servie (par exemple, en vert et
barré).
o Si la case est décochée, le booléen redevient false, et la classe CSS est retirée pour
indiquer que la commande n’est pas servie.
Exemple
Si vous cochez la case à côté de Pizza Margherita - 70 DH, la commande est affichée
comme "servie" avec un style visuel spécial pour la différencier.
Exercice 3 : Afficher le Résumé des Commandes
But : Créer un résumé qui affiche :
• Le nombre total de commandes.
• Le nombre de commandes qui sont servies.
• Le montant total des commandes servies.
Étapes
1. Ajoutez un paragraphe (p) sous la liste pour afficher le résumé des commandes.
Fonctionnalité
• Créez une fonction updateSummary() qui met à jour ce résumé. Cette fonction :
o Compte le nombre total de commandes dans la liste.
o Compte combien de commandes sont marquées comme "servies".
o Calcule le montant total des commandes servies en additionnant les prix des
commandes servies.
Exemple
Supposons que vous avez 3 commandes :
• 2 sont servies (par exemple, Pizza Margherita - 70 DH et Salade César - 30 DH).
• Le résumé affichera : Total : 3 commandes, Servies : 2, Montant Total Servi
: 100 DH.
Exercice 4 : Filtrer les Commandes Servies
But : Ajouter des options pour afficher uniquement les commandes "servies" ou toutes les
commandes.
Étapes
1. Ajoutez deux boutons sous le résumé :
o Un bouton "Toutes les Commandes" pour afficher toutes les commandes.
o Un bouton "Commandes Servies" pour n’afficher que les commandes qui sont
servies.
Fonctionnalité
• Créez une fonction filterOrders(showServedOnly) qui :
o Affiche toutes les commandes si showServedOnly est false.
o Affiche uniquement les commandes marquées comme "servies" si showServedOnly
est true.
Exemple
En cliquant sur le bouton "Commandes Servies", seules les commandes marquées comme
"servies" resteront visibles dans la liste.