Att lägga till ett nytt köp i livsmedelskalkylatorn

För att börja, låt oss göra så att när knappen klickas läggs en ny rad till i tabellen med ett köp:

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

Min lösning har dock uppenbara problem med kodduplicering: i princip skriver vi samma kod för varje cell.

Det vore lämpligt att ha en funktion för att skapa en tabellcell. Låt denna funktion ta en referens till tabellraden som första parameter, celltexten som andra parameter, och CSS-klassnamnet för cellen som tredje:

function createCell(tr, value, name) {
	
}

Med en sådan funktion skulle vi kunna skriva om koden ovan på följande sätt:

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

Implementera funktionen createCell som jag beskrev.

Kopiera min kod för att lägga till ett nytt köp. Testa att lägga till ett nytt köp i tabellen.

Modifiera funktionen createCell så att den returnerar den skapade tabellcellen via return.