Produktų skaičiuoklė JavaScript

Šiame skyriuje mes įgyvendinsime produktų skaičiuoklę. Ji bus lentelė, į kurią mūsų svetainės vartotojas įrašys savo pirkinius.

Tegul pirkiniai įrašomi naudojant formą. Be to, kiekvienam produktui numatykime nuorodą pašalinti. Taip pat padarykime galimybę redaguoti pavadinimą, kainą ir produkto kiekį. Tegul toks redagavimas vyksta dukart spustelėjus lentelės langelį.

Tegul po lentele rodoma bendra produktų kaina. Padarykime taip, kad ši suma būtų perskaičiuojama pašalinant ir redaguojant produktus.

Štai pavyzdys, kas turėtų gautis:

Štai vertimas, kurį galite naudoti spręsdami užduotį:

<div id="parent">
	<div id="form">
		<input id="name" placeholder="pavadinimas">
		<input id="price" placeholder="kaina">
		<input id="amount" placeholder="kiekis">
		<input id="add" type="button" value="pridėti">
	</div>
	
	<h2>Produktų lentelė:</h2>
	<table id="table">
		<tr>
			<th>pavadinimas</th>
			<th>kaina</th>
			<th>kiekis</th>
			<th>suma</th>
			<th>pašalinti</th>
		</tr>
	</table>
	<div id="result">
		bendra suma: <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;
}

Iš karto gaukime nuorodas į visus reikalingus žymes kintamuosiuose:

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

Nukopijuokite sau mano pateiktas kodo ruošinius.