Toevoegen van een nieuwe aankoop in de productencalculator

Laten we eerst ervoor zorgen dat er bij het klikken op de knop een nieuwe rij met een aankoop aan de tabel wordt toegevoegd:

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 = 'verwijderen';
	td.classList.add('remove');
	tr.appendChild(td);
	
	table.appendChild(tr);
});

Mijn voorgestelde oplossing heeft echter duidelijke problemen met code-duplicatie: in feite schrijven we voor elke cel dezelfde code.

Het zou gepast zijn om een functie te hebben voor het maken van een tabelcel. Laat deze functie als eerste parameter een verwijzing naar de tabelrij ontvangen, als tweede parameter - de tekst van de tabelcel, en als derde - de naam van de CSS-klasse van de cel:

function createCell(tr, value, name) {
	
}

Met zo'n functie zouden we de bovenstaande code als volgt kunnen herschrijven:

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

Implementeer de door mij beschreven functie createCell.

Kopieer mijn code voor het toevoegen van een nieuwe aankoop. Test het toevoegen van een nieuwe aankoop aan de tabel.

Pas de functie createCell zo aan, dat deze via return de gemaakte tabelcel teruggeeft.