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:

javascriptadd.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:

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