Kalkulator Produk dalam JavaScript

Dalam bagian ini, kita akan mengimplementasikan kalkulator produk. Ini akan berupa tabel, di mana pengguna situs web kami akan memasukkan pembelian mereka.

Biarkan pembelian dimasukkan menggunakan formulir. Selain itu, untuk setiap produk, kami akan menyediakan tautan untuk menghapus. Kami juga akan membuat kemampuan untuk mengedit nama, harga, dan kuantitas produk. Biarkan pengeditan seperti itu terjadi dengan klik ganda pada sel tabel.

Biarkan di bawah tabel ditampilkan total biaya produk. Mari kita buat agar jumlah ini dihitung ulang saat produk dihapus dan saat produk diedit.

Berikut adalah contoh yang harus dihasilkan:

Berikut adalah markup yang dapat Anda gunakan dalam menyelesaikan tugas:

<div id="parent">
	<div id="form">
		<input id="name" placeholder="nama">
		<input id="price" placeholder="harga">
		<input id="amount" placeholder="kuantitas">
		<input id="add" type="button" value="tambahkan">
	</div>
	
	<h2>Tabel Produk:</h2>
	<table id="table">
		<tr>
			<th>nama</th>
			<th>harga</th>
			<th>jmlh</th>
			<th>jumlah</th>
			<th>hapus</th>
		</tr>
	</table>
	<div id="result">
		total 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;
}

Langsung saja, mari kita dapatkan referensi ke semua tag yang diperlukan ke dalam variabel:

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

Salinlah kode persiapan yang telah saya sajikan untuk Anda.