Калкулятори маҳсулот дар 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');

Заготовкаҳои коде, ки ман пешниҳод кардаам, ба худ нусхабардорӣ кунед.