Créer une interface de commande de burgers

Dans ce tutoriel, nous allons cr\xc3\xa9er une interface pour commander chez un restaurant fictif.
Elle ne commandera pas r\xc3\xa9ellement, mais c'est un bon exercice pour exp\xc3\xa9rimenter les bases de JavaScript, CSS et HTML.
Notre restaurant proposera 2 burgers, 4 pizzas, une salade et 3 parfums de glace. Il y aura \xc3\xa9galement 2 menus.
Dans un premier temps, il faut dresser le menu en HTML brut. Pour cela, on cr\xc3\xa9e un tableau dans un fichier HTML que l'on aura cr\xc3\xa9\xc3\xa9.
Vous pouvez le faire vous-m\xc3\xaame, sinon voici une esquisse du code :

<table><thead><tr><td>Produit</td><td>Image</td><td>Prix</td></tr></thead>
    <tbody>
<tr>
<td>Hamburger Savoyard</td>
<td><img id="burgersavoyard" src="burgersavoyard.jpeg"></td>
<td>15 euros</td>
</tr>
<tr>
<td>Hamburger Vegan</td>
<td><img id="burgervegan" src="burgervegan.jpeg"></td>
<td>12 euros</td>
</tr>  </tbody></table>

Libre \xc3\xa0 vous de trouver les images.
Cela devrait ressembler \xc3\xa0 \xc3\xa7a :

Credits image du burger:Robert Owen-Wahl from Pixabay
Ok. Maintenant, nous pouvons rajouter du CSS pour enjoliver tout cela.
Dans un fichier CSS, nous allons d\xc3\xa9finir un style pour le tableau :

body {
  background-color: rgb(30, 30, 30);
  color: white;
  font-family: "Comic Sans MS";
}

 img {
 border: solid 1px white;
 margin-top: 30px;
 }
 
 thead {
 text-align: center;  font-size: 1.5em;
 }
 

Voil\xc3\xa0 le r\xc3\xa9sultat :

Vous pouvez rajouter les pizzas, glaces, salades et menus.
Il est d\xc3\xa9sormais temps de coder le JavaScript. Tout d'abord, il faut r\xc3\xa9cup\xc3\xa9rer les images et leur attribuer un \xc3\xa9v\xc3\xa8nement au clic :

 burgersavoyard=document.getElementById("burgersavoyard");
 burgervegan=document.getElementById("burgervegan");
 burgersavoyard.addEventListener("click", function () {commander("Burger Savoyard")});
 burgervegan.addEventListener("click", function () {commander("Burger Vegan")});
 

Puis, il faut cr\xc3\xa9er la fonction commander (avant le code ci-dessus) :

 panier={};
 function commander(element) {
 number=prompt("Combien de "+element+" ?");
 panier[element]=number;
 }
 

Enfin, nous permettons \xc3\xa0 'utilisateur de voir sa commande. Un bouton HTML :

 <button id="voirPanier">Voir mon panier</button>
 

Et une pointe de JavaScript :

 voirpanier=document.getElementById("voirPanier");
 voirpanier.addEventListener("click", function () {for (element in panier) {alert("Vous avez "+panier[element]+" "+element);}});
 

Et voil\xc3\xa0 ! Petit d\xc3\xa9fi : serez-vous capable de cr\xc3\xa9er les menus ? Aide : Il faut mettre plusieurs instructions commander dans les callbacks.
Bon appetit !