JavaScriptтеги продукттердин калькулятору

Бул бөлүмдө биз продукттердин калькуляторун ишке ашырабыз. Ал колдонуучунун сатып алууларын киргизе турган таблица түрүндө болот.

Сатып алуулар форманын жардамы менен киргизилсин. Ошондой эле, ар бир продукт үчүн өчүрүү шилтемесин камдайлы. Ошондой эле продукттун аталышын, баасын жана санын түзөтүү мүмкүнчүлүгүн да камдайлы. Түзөтүү таблицанын уячасына кош чыкылдаганда ишке ашырылсын.

Таблицанын төмөнүндө продукттердин жалпы баасы көрсөтүлсүн. Бул сумма продукттар өчүрүлгөндө же түзөтүлгөндө кайра эсептелиши керек.

Мына аягына чыгарышыбыз керек нерсенин үлгүсү:

Мына сиз тапшырманы чечүүдө колдонсо боло турган верстка:

<div id="parent">
	<div id="form">
		<input id="name" placeholder="аталышы">
		<input id="price" placeholder="баасы">
		<input id="amount" placeholder="саны">
		<input id="add" type="button" value="кошуу">
	</div>
	
	<h2>Продукттер таблицасы:</h2>
	<table id="table">
		<tr>
			<th>аталышы</th>
			<th>баасы</th>
			<th>саны</th>
			<th>суммасы</th>
			<th>өчүрүү</th>
		</tr>
	</table>
	<div id="result">
		жалпы сумма: <span id="total">0</span>
	</div>
</div>

* {
	box-sizing: border-box;
}
#parent {
	margin: 0 auto;
	width: 500px;
}

#form {
	display: flex;
	margin-bottom: 15px;
}
#form input {
	padding: 8px;
	width: 24%;
	margin: 0 0.5% 10px 0.5%;
}

h2 {
	margin-top: 0;
	margin-bottom: 7px;
}

#table {
	width: 100%;
	margin-bottom: 10px;
}
#table td, #table th {
	padding: 8px;
	text-align: center;
	border: 1px solid black;
}
#table td.remove {
	color: blue;
	cursor: pointer;
	text-decoration: underline;
}
#table td.remove:hover {
	text-decoration: none;
}

#result {
	text-align: right;
	margin-right: 10px;
}

Дароо эле керектуу бардык тегдерге шилтемелерди өзгөрмөлөргө алалы:

let name   = document.querySelector('#name');
let price  = document.querySelector('#price');
let amount = document.querySelector('#amount');
let add    = document.querySelector('#add');
let table  = document.querySelector('#table');
let total  = document.querySelector('#total');

Өзүңүзгө мен көрсөткөн даяр код фрагменттерин көчүрүп алыңыз.