Kalkulator Produk dalam JavaScript

Dalam bahagian ini, kami akan melaksanakan kalkulator produk. Ia akan menjadi satu jadual, di mana pengguna laman web kami akan memasukkan pembelian mereka.

Biarkan pembelian dimasukkan menggunakan borang. Selain itu, untuk setiap produk, kami akan sediakan pautan untuk pemadaman. Kami juga akan buat kemungkinan untuk menyunting nama, harga dan kuantiti produk. Biarkan pengeditan sedemikian berlaku pada klik berganda pada sel jadual.

Biarkan di bawah jadual dipaparkan jumlah kos produk. Kami akan memastikan jumlah ini dikira semula apabila produk dipadam dan disunting.

Berikut adalah contoh apa yang sepatutnya diperoleh:

Berikut adalah susun atur yang boleh anda gunakan apabila menyelesaikan tugas:

<div id="parent">
	<div id="form">
		<input id="name" placeholder="nama">
		<input id="price" placeholder="harga">
		<input id="amount" placeholder="kuantiti">
		<input id="add" type="button" value="tambah">
	</div>
	
	<h2>Jadual Produk:</h2>
	<table id="table">
		<tr>
			<th>nama</th>
			<th>harga</th>
			<th>kuantiti</th>
			<th>jumlah</th>
			<th>padam</th>
		</tr>
	</table>
	<div id="result">
		jumlah keseluruhan: <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;
}

Segera mari kita dapatkan pautan ke semua tag yang diperlukan dalam pembolehubah:

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

Salin sendiri sediaan kod yang saya bentangkan kepada anda.