Kalkulačka produktů v JavaScriptu

V této sekci implementujeme kalkulačku produktů. Bude to tabulka, do které uživatel našeho webu bude zadávat své nákupy.

Nákupy nechť jsou zadávány pomocí formuláře. Kromě toho pro každý produkt zajistíme odkaz na odstranění. Vytvoříme také možnost editace názvu, ceny a množství produktu. Nechť k takové editaci dochází při dvojitém kliknutí na buňku tabulky.

Nechť pod tabulkou je zobrazena celková cena produktů. Zařídíme, aby se tento součet přepočítával při odstranění a při editaci produktů.

Zde je ukázka toho, co by mělo vzniknout:

Zde je rozvržení stránky, které můžete použít při řešení úlohy:

<div id="parent">
	<div id="form">
		<input id="name" placeholder="název">
		<input id="price" placeholder="cena">
		<input id="amount" placeholder="množství">
		<input id="add" type="button" value="přidat">
	</div>
	
	<h2>Tabulka produktů:</h2>
	<table id="table">
		<tr>
			<th>název</th>
			<th>cena</th>
			<th>množ.</th>
			<th>součet</th>
			<th>odstranit</th>
		</tr>
	</table>
	<div id="result">
		celkový souč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;
}

Ihned si připravme získání odkazů na všechny potřebné prvky do proměnný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');

Zkopírujte si ode mne připravené útržky kódu.