On désire proposer à un utilisateur la possibilité de commander des produits dans un catalogue. Pour cela, on va, d'une part,
créer deux tableaux javascript : le premier sera le "catalogue", et le second sera le "panier" des commandes.
Le catalogue et le panier contiendront tous deux des objets représentant les produits.
Le catalogue sera affiché par une liste HTML. Pour repérer à quel objet du tableau correspond une entrée de la liste, la valeur associée à chaque élément de liste sera sa position dans le tableau.
Quand on appuirera sur le bouton "ajouter", le produit sera ajouté au panier, et une représentation de celui-ci, sous forme de tableau HTML, sera mise à jour en utilisant le DOM. Le prix total de la commande sera lui aussi mis à jour et affiché dans la page.
désignation
prix
Total 0
Question 1
Écrire le code HTML qui servira de base à cette page.
Question 2
Comment va-t-on représenter nos produits en javascript, sachant qu'un
produit a un prix (HT) et une désignation. Proposez un système pour
ajouter le calcul du prix TTC (avec une TVA fixe de 20%).
Question 3
On suppose qu'on initialise et remplit un tableau
(au sens javascript/Array) de produits, appelé "catalogue", dans
l'en-tête de la page. Écrivez le code de la fonction
remplirCatalogue() qui remplira la liste déroulante des
produits à partir du contenu du tableau catalogue. Sur chaque ligne de
la liste devra apparaître la désignation du produit.
On utilisera le DOM
Question 4
Écrivez la fonction ajouter(), qui sera appelée
quand on pressera le bouton "ajouter". Cette fonction aura les effets suivants :
le produit sera ajouté au panier.
le tableau (html) représentant le panier sera mis à jour
le total de la commande sera mis à jour
On utilisera le DOM (sauf éventuellement pour le total)
Question 5
Modifiez pour afficher pour chaque produit son prix TTC et son prix HT.
Question 6
On veut que le total soit la dernière ligne du tableau. Modifiez votre code en conséquence (plusieurs solutions possibles).