Προσθήκη νέας αγοράς στον υπολογιστή προϊόντων

Για αρχή, ας κάνουμε έτσι ώστε με πάτημα στο κουμπί να προστίθεται ένα νέο σειρά με την αγορά στον πίνακα:

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 το δημιουργημένο κελί του πίνακα.