Calculatrice de produits en JavaScript

Dans cette section, nous allons implémenter une calculatrice de produits. Il s'agira d'un tableau dans lequel l'utilisateur de notre site pourra saisir ses achats.

Laissez les achats être saisis via un formulaire. En plus de cela, prévoyons un lien de suppression pour chaque produit. Créons également une possibilité d'édition du nom, du prix et de la quantité du produit. Laissez cet édition se faire par double-clic sur une cellule du tableau.

Laissez le coût total des produits s'afficher sous le tableau. Faisons en sorte que cette somme soit recalculée à la suppression et à l'édition des produits.

Voici un exemple de ce qui devrait être obtenu :

Voici le balisage que vous pouvez utiliser pour résoudre le problème :

<div id="parent">
	<div id="form">
		<input id="name" placeholder="nom">
		<input id="price" placeholder="prix">
		<input id="amount" placeholder="quantité">
		<input id="add" type="button" value="ajouter">
	</div>
	
	<h2>Tableau des produits :</h2>
	<table id="table">
		<tr>
			<th>nom</th>
			<th>prix</th>
			<th>quantité</th>
			<th>total</th>
			<th>supprimer</th>
		</tr>
	</table>
	<div id="result">
		total général : <span id="total">0</span>
	</div>
</div>

* {
	box-sizing: border-box;
}
#parent {
	margin: 0 auto;
	width: 500px;
}

#form {
	display: flex;
	margin-bottom: 15px;
}
#form input {
	padding: 8px;
	width: 24%;
	margin: 0 0.5% 10px 0.5%;
}

h2 {
	margin-top: 0;
	margin-bottom: 7px;
}

#table {
	width: 100%;
	margin-bottom: 10px;
}
#table td, #table th {
	padding: 8px;
	text-align: center;
	border: 1px solid black;
}
#table td.remove {
	color: blue;
	cursor: pointer;
	text-decoration: underline;
}
#table td.remove:hover {
	text-decoration: none;
}

#result {
	text-align: right;
	margin-right: 10px;
}

Immédiatement, obtenons les références vers tous les balises nécessaires dans des variables :

let name   = document.querySelector('#name');
let price  = document.querySelector('#price');
let amount = document.querySelector('#amount');
let add    = document.querySelector('#add');
let table  = document.querySelector('#table');
let total  = document.querySelector('#total');

Copiez pour vous les ébauches de code que j'ai présentées.