JavaScriptda Mahsulotlar Kalkulyatori

Ushbu bo'limda biz mahsulotlar kalkulyatorini amalga oshiramiz. Bu foydalanuvchi o'z xaridlarini kiritadigan jadval ko'rinishida bo'ladi.

Xaridlar forma orqali kiritilsin. Bundan tashqari, har bir mahsulot uchun o'chirish havolasi belgilaymiz. Shuningdek, mahsulot nomi, narxi va miqdorini tahrirlash imkoniyatini yaratamiz. Bunday tahrirlash jadval katagiga ikki marta bosish orqali amalga oshirilsin.

Jadval ostida mahsulotlarning umumiy qiymati chiqarilsin. Bu summa mahsulotlar o'chirilganda va tahrirlanganda qayta hisoblansin.

Natijada quyidagilar hosil bo'ladi:

Masalani yechishda foydalanishingiz mumkin bo'lgan verstka:

<div id="parent">
	<div id="form">
		<input id="name" placeholder="nomi">
		<input id="price" placeholder="narxi">
		<input id="amount" placeholder="miqdori">
		<input id="add" type="button" value="qo‘shish">
	</div>
	
	<h2>Mahsulotlar jadvali:</h2>
	<table id="table">
		<tr>
			<th>nomi</th>
			<th>narxi</th>
			<th>miqdori</th>
			<th>summasi</th>
			<th>o‘chirish</th>
		</tr>
	</table>
	<div id="result">
		umumiy summa: <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;
}

Darhol kerakli barcha teglarni o'zgaruvchilarga olamiz:

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

Mening taqdim etgan kodlarimdan nusxa oling.