Calculadora de productos en JavaScript

En esta sección implementaremos una calculadora de productos. Será una tabla en la que el usuario de nuestro sitio web podrá introducir sus compras.

Las compras se introducirán mediante un formulario. Además, para cada producto incluiremos un enlace de eliminación. También crearemos la posibilidad de editar el nombre, precio y cantidad del producto. Que dicha edición ocurra al hacer doble clic en una celda de la tabla.

Debajo de la tabla se mostrará el costo total de los productos. Hagamos que esta suma se recalcule al eliminar y al editar productos.

He aquí un ejemplo de lo que debería resultar:

He aquí el marcado que puedes utilizar para resolver la tarea:

<div id="parent">
	<div id="form">
		<input id="name" placeholder="nombre">
		<input id="price" placeholder="precio">
		<input id="amount" placeholder="cantidad">
		<input id="add" type="button" value="añadir">
	</div>
	
	<h2>Tabla de productos:</h2>
	<table id="table">
		<tr>
			<th>nombre</th>
			<th>precio</th>
			<th>cantidad</th>
			<th>total</th>
			<th>eliminar</th>
		</tr>
	</table>
	<div id="result">
		total general: <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;
}

Inmediatamente obtengamos referencias a todas las etiquetas necesarias en 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');

Cópiese las plantillas de código presentadas por mí.