Додавање на нова купувачка во калкулаторот за производи

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

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 создадената ќелија од табелата.