Calculator de produse în JavaScript

În această secțiune vom implementa un calculator de produse. Acesta va fi un tabel, în care utilizatorul site-ului nostru va putea introduce achizițiile sale.

Să presupunem că achizițiile sunt introduse cu ajutorul unui formular. În plus, pentru fiecare produs vom prevădea o legătură pentru ștergere. Vom crea și posibilitatea de editare a numelui, prețului și cantității produsului. Să presupunem că această editare are loc la dublu-clic pe celula tabelului.

Să presupunem că sub tabel este afișat costul total al produselor. Să facem astfel încât această sumă să fie recalculată la ștergere și la editarea produselor.

Iată un exemplu a ceea ce ar trebui să obțineți:

Iată marcajul pe care îl puteți utiliza la rezolvarea problemei:

<div id="parent">
	<div id="form">
		<input id="name" placeholder="nume">
		<input id="price" placeholder="preț">
		<input id="amount" placeholder="cantitate">
		<input id="add" type="button" value="adaugă">
	</div>
	
	<h2>Tabelul produselor:</h2>
	<table id="table">
		<tr>
			<th>nume</th>
			<th>preț</th>
			<th>cant.</th>
			<th>suma</th>
			<th>șterge</th>
		</tr>
	</table>
	<div id="result">
		total general: <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;
}

Să obținem imediat legăturile către toate tag-urile necesare în variabile:

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

Copiați la voi pregătirile de cod prezentate de mine.