Kalkulator produktov v JavaScript

V tem razdelku bomo implementirali kalkulator produktov. Predstavljal bo tabelo, v katero bo uporabnik naše spletne strani vnašal svoje nakup.

Naj se nakupi vnašajo s pomočjo obrazca. Poleg tega za vsak produkt predvidimo povezavo za brisanje. Naredimo tudi možnost urejanja imena, cene in količine produkta. Naj se takšno urejanje zgodi ob dvojnem kliku na celico tabele.

Naj se pod tabelo izpiše skupna cena produktov. Poskrbimo, da se ta vsota preračuna pri brisanju in pri urejanju produktov.

Vzorec tega, kar bi moralo biti doseženo:

To je postavitev, ki jo lahko uporabite pri reševanju naloge:

<div id="parent">
	<div id="form">
		<input id="name" placeholder="ime">
		<input id="price" placeholder="cena">
		<input id="amount" placeholder="količina">
		<input id="add" type="button" value="dodaj">
	</div>
	
	<h2>Tabela produktov:</h2>
	<table id="table">
		<tr>
			<th>ime</th>
			<th>cena</th>
			<th>kol.</th>
			<th>vsota</th>
			<th>izbriši</th>
		</tr>
	</table>
	<div id="result">
		skupni znesek: <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;
}

Takoj pridobimo povezave do vseh potrebnih oznak v spremenljivke:

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

Kopirajte si pripravljene predloge kode.