Агульная сума ў калькулятары прадуктаў на JavaScript

Давайце цяпер зробім так, каб пад табліцай выводзілася агульная сума пакупак. Тут ёсць нюансы.

Калі абдумаць сітуацыю, то стане зразумела, што сума павінна карэктавацца не толькі пры дабаўленні новай пакупкі, але таксама і пры выдаленні і пры рэдагаванні.

Я б прапанаваў у такім выпадку зрабіць нейкую функцыю, назовем яе recountTotal, якая будзе выконваць поўны пераразлік сумы. Гэта значыць будзе пробегацца цыклам па ўсіх пакупках і сумаваць змесціва іх калонкі cost.

Маючы такую функцыю, мы зможам выклікаць яе ў любым месцы, дзе прадугледжваюцца якія-небудзь змены агульнай сумы. Вядома, крыху не аптымальна кожны раз разлічваць агульную суму. Затое мы атрымаем істотнае спрасчэнне кода.

Выкарыстаем прадугледжаную функцыю пры стварэнні новай пакупкі:

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);
	recountTotal(); // пералічым агульную суму
});

Вось загатоўка апісанай функцыі:

function recountTotal() {
	let costs = table.querySelectorAll('.cost');
	
	if (costs) {
		// знаходзім суму і запісваем яе ў #total
	}
}

Рэалізуйце апісаную мною функцыю recountTotal.