Kalkulačka produktov v JavaScripte

V tejto časti implementujeme kalkulačku produktov. Bude to tabuľka, do ktorej používateľ našej stránky bude zadávať svoje nákupy.

Nech sú nákupy zadané pomocou formulára. Okrem toho pre každý produkt zabezpečíme odkaz na odstránenie. Vytvorme aj možnosť editácie názvu, ceny a množstva produktu. Nech sa takáto editácia uskutoční dvojitým kliknutím na bunku tabuľky.

Nech sa pod tabuľkou zobrazuje celková cena produktov. Zabezpečme, aby sa tento súčet prepočítaval pri odstránení a pri editácii produktov.

Tu je ukážka toho, čo by malo vzniknúť:

Tu je verzba, ktorú môžete použiť pri riešení úlohy:

<div id="parent">
	<div id="form">
		<input id="name" placeholder="názov">
		<input id="price" placeholder="cena">
		<input id="amount" placeholder="množstvo">
		<input id="add" type="button" value="pridať">
	</div>
	
	<h2>Tabuľka produktov:</h2>
	<table id="table">
		<tr>
			<th>názov</th>
			<th>cena</th>
			<th>množ.</th>
			<th>suma</th>
			<th>odstrániť</th>
		</tr>
	</table>
	<div id="result">
		celkový súčet: <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;
}

Okamžite si získajme odkazy na všetky potrebné elementy do premenných:

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

Skopírujte si k sebe predložené záložky kódu.