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:

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

function createCell(tr, value, name) {
	
}

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

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

Implementate la funzione createCell che ho descritto.

Copiate il mio codice per aggiungere un nuovo acquisto. Testate l'aggiunta di un nuovo acquisto nella tabella.

Modificate la funzione createCell in modo che restituisca tramite return la cella della tabella creata.