Aggiunta di un nuovo acquisto nel calcolatore di prodotti

Per cominciare, facciamo in modo che quando si clicca sul pulsante, una nuova riga con l'acquisto venga aggiunta alla tabella:

javascriptadd.addEventListener('click', function() {
  let tr = document.createElement('tr');
  
  let td;
  
  td = document.createElement('td');
  td.textContent = name.value;
  td.classList.add('name');
  tr.appendChild(td);
  
  td = document.createElement('td');
  td.textContent = price.value;
  td.classList.add('price');
  tr.appendChild(td);
  
  td = document.createElement('td');
  td.textContent = amount.value;
  td.classList.add('amount');
  tr.appendChild(td);
  
  td = document.createElement('td');
  td.textContent = price.value * amount.value;
  td.classList.add('cost');
  tr.appendChild(td);
  
  td = document.createElement('td');
  td.textContent = 'elimina';
  td.classList.add('remove');
  tr.appendChild(td);
  
  table.appendChild(tr);
});

La soluzione che ho presentato, tuttavia, ha evidenti problemi di duplicazione del codice: in pratica per ogni cella scriviamo lo stesso codice.

Sarebbe appropriato avere una funzione per creare una cella della tabella. Lasciamo che questa funzione accetti come primo parametro un riferimento alla riga della tabella, come secondo parametro - il testo della cella della tabella, e come terzo - il nome della classe CSS della cella:

javascriptfunction createCell(tr, value, name) {
  
}

Avendo una tale funzione, potremmo riscrivere il codice sopra nel seguente modo:

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, 'elimina', 'remove');
  
  table.appendChild(tr);
});