Productencalculator in JavaScript

In dit gedeelte implementeren we een productencalculator. Het wordt een tabel, waarin de gebruiker van onze site zijn aankopen kan invoeren.

Laten we aankopen via een formulier invoeren. Daarnaast voorzien we voor elk product een link om te verwijderen. We maken ook de mogelijkheid om naam, prijs en hoeveelheid van het product te bewerken. Laten we dit bewerken laten plaatsvinden door dubbel te klikken op een cel in de tabel.

Laten we onder de tabel de totale kosten van de producten weergeven. Laten we het zo maken dat dit totaalbedrag wordt herberekend bij het verwijderen en bij het bewerken van producten.

Hier is een voorbeeld van wat het resultaat moet zijn:

Hier is de opmaak die je kunt gebruiken bij het oplossen van de opdracht:

<div id="parent">
	<div id="form">
		<input id="name" placeholder="naam">
		<input id="price" placeholder="prijs">
		<input id="amount" placeholder="aantal">
		<input id="add" type="button" value="toevoegen">
	</div>
	
	<h2>Productentabel:</h2>
	<table id="table">
		<tr>
			<th>naam</th>
			<th>prijs</th>
			<th>aantal</th>
			<th>totaal</th>
			<th>verwijderen</th>
		</tr>
	</table>
	<div id="result">
		totaalbedrag: <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;
}

Laten we meteen verwijzingen naar alle benodigde tags in variabelen zetten:

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 de door mij gepresenteerde codefragmenten voor jezelf.