JavaScript да маҳсулотлар ҳисоблагчи

Ушбу бўлимда биз маҳсулотлар ҳисоблагчини амалга оширамиз. У бизнинг веб-саҳифамиз фойдаланувчиси ўз харидларини киритадиган жадвал бўлади.

Харидлар формa орқали киритилсин. Бундан ташқари, ҳар бир маҳсулот учун ўчириш ҳаволaсини кўзда тутамиз. Шунингдек, маҳсулотнинг номи, нархи ва миқдорини таҳрирлаш имкониятини берамиз. Бу таҳрирлаш жадвал ҳужайрасига икки марта босилганда амалга оширилсин.

Жадвал остида маҳсулотларнинг жами қиймати чиқарилсин. Бундай сумма маҳсулотлар ўчирилганда ва таҳрирланганда қайта ҳисоблансин.

Натижада чиқадиган намуна:

Масалани ечишда фойдаланишингиз мумкин бўлган верстка:

<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;
}

Дарҳол керакли бўлган барча тегларга ҳаволaларни оламиз:

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');

Мен тақдим қилган код лойиҳаларини ўзингизга нусхалаб олинг.