Calculadora de Produtos em JavaScript

Nesta seção, implementaremos uma calculadora de produtos. Ela será uma tabela, na qual o usuário do nosso site irá inserir suas compras.

Suponha que as compras sejam inseridas por meio de um formulário. Além disso, para cada produto, providenciaremos um link de remoção. Vamos também criar a possibilidade de editar o nome, preço e quantidade do produto. Suponha que tal edição ocorra com um duplo clique na célula da tabela.

Suponha que, abaixo da tabela, seja exibido o custo total dos produtos. Vamos fazer com que essa soma seja recalculada na remoção e na edição dos produtos.

Aqui está um exemplo do que deve ser obtido:

Aqui está a marcação que você pode usar para resolver a tarefa:

<div id="parent">
	<div id="form">
		<input id="name" placeholder="nome">
		<input id="price" placeholder="preço">
		<input id="amount" placeholder="quantidade">
		<input id="add" type="button" value="adicionar">
	</div>
	
	<h2>Tabela de produtos:</h2>
	<table id="table">
		<tr>
			<th>nome</th>
			<th>preço</th>
			<th>quantidade</th>
			<th>total</th>
			<th>remover</th>
		</tr>
	</table>
	<div id="result">
		total geral: <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;
}

Vamos imediatamente obter referências para todas as tags necessárias em variáveis:

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');

Copie para si os trechos de código apresentados por mim.