Produk Sakrekenaar in JavaScript

In hierdie afdeling sal ons 'n produk sakrekenaar implementeer. Dit sal 'n tabel wees waarin die gebruiker van ons webwerf sy aankope sal kan invoer.

Laat aankope ingevoer word deur 'n vorm. Boonop sal ons vir elke produk 'n skakel voorsien om dit te verwyder. Ons sal ook die moontlikheid skep om die naam, prys en hoeveelheid van die produk te redigeer. Laat sodanige redigering plaasvind met 'n dubbelkliek op die tabel sel.

Laat die totale koste van die produkte onder die tabel vertoon word. Ons sal dit so maak dat hierdie som herbereken word met die verwydering en redigering van produkte.

Hier is 'n voorbeeld van wat behoort om te kry:

Hier is die opmaak wat jy kan gebruik by die oplossing van die probleem:

<div id="parent">
	<div id="form">
		<input id="name" placeholder="naam">
		<input id="price" placeholder="prys">
		<input id="amount" placeholder="hoeveelheid">
		<input id="add" type="button" value="voeg by">
	</div>
	
	<h2>Tabel van produkte:</h2>
	<table id="table">
		<tr>
			<th>naam</th>
			<th>prys</th>
			<th>hoeveelheid</th>
			<th>totaal</th>
			<th>verwyder</th>
		</tr>
	</table>
	<div id="result">
		algehele totaal: <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;
}

Laat ons dadelik skakels na al die nodige etikette in veranderlikes kry:

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

Kopieer die voorsiene kode vir jouself.