Valor total na calculadora de produtos em JavaScript

Vamos agora fazer com que, abaixo da tabela, seja exibido o valor total das compras. Há alguns detalhes aqui.

Se pensarmos na situação, ficará claro que o total deve ser ajustado não apenas ao adicionar uma nova compra, mas também ao excluir e ao editar.

Eu sugeriria, nesse caso, criar uma função, vamos chamá-la de recountTotal, que realizará um recálculo completo do total. Ou seja, ela percorrerá todas as compras em um loop e somará o conteúdo da sua coluna cost.

Tendo essa função, poderemos chamá-la em qualquer lugar onde sejam esperadas alterações no valor total. Claro, não é totalmente otimizado recalcular o total a cada vez. Mas, por outro lado, teremos uma simplificação significativa do código.

Vamos usar a função proposta ao criar uma nova compra:

add.addEventListener('click', function() {
	let tr = document.createElement('tr');
	
	createCell(tr, name.value, 'name');
	createCell(tr, price.value, 'price');
	createCell(tr, amount.value, 'amount');
	createCell(tr, price.value * amount.value, 'cost');
	createCell(tr, 'remover', 'remove');
	
	table.appendChild(tr);
	recountTotal(); // recalcula o total
});

Aqui está o esboço da função descrita:

function recountTotal() {
	let costs = table.querySelectorAll('.cost');
	
	if (costs) {
		// encontramos a soma e a escrevemos em #total
	}
}

Implemente a função recountTotal que descrevi.