Додавање нове куповине у калкулатору намирница

За почетак, хајде да направимо да се при клику на дугме у табелу додаје нови ред са куповином:

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 = 'обриши';
	td.classList.add('remove');
	tr.appendChild(td);
	
	table.appendChild(tr);
});

Моје предложено решење, међутим, има очигледне проблеме са дуплирањем кода: у суштини за сваку ћелију пишемо исти код.

Било би погодно имати неку функцију за креирање ћелије табеле. Нека ова функција као први параметар прима референцу на ред табеле, као други параметар - текст ћелије табеле, а као трећи - име CSS класе ћелије:

function createCell(tr, value, name) {
	
}

Имајући такву функцију могли бисмо прерадити горе наведени код на следећи начин:

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, 'обриши', 'remove');
	
	table.appendChild(tr);
});

Имплементирајте описану функцију createCell.

Копирајте мој код за додавање нове куповине. Тестирајте додавање нове куповине у табелу.

Модификујте функцију createCell тако да враћа преко return креирану ћелију табеле.