Produktu kalkulators JavaScript

Šajā sadaļā mēs realizēsim produktu kalkulatoru. Tas būs tabula, kuru mūsu vietnes lietotājs ievadīs savus pirkumus.

Ļaujiet iegādātos produktus ievadīt, izmantojot veidlapu. Turklāt katram produktam paredzēsim saiti dzēšanai. Izveidosim arī iespēju rediģēt produkta nosaukumu, cenu un daudzumu. Ļaujiet šādam rediģēšanai notikt ar dubultklikšķi uz tabulas šūnas.

Ļaujiet zem tabulas izvadīt kopējās izmaksas produktiem. Padarīsim tā, lai šī summa pārrēķinātos dzēšot un rediģējot produktus.

Lūk, paraugs tam, kam vajadzētu izveidoties:

Lūk, atzīmējums, kuru varat izmantot risinot uzdevumu:

<div id="parent">
	<div id="form">
		<input id="name" placeholder="nosaukums">
		<input id="price" placeholder="cena">
		<input id="amount" placeholder="daudzums">
		<input id="add" type="button" value="pievienot">
	</div>
	
	<h2>Produktu tabula:</h2>
	<table id="table">
		<tr>
			<th>nosaukums</th>
			<th>cena</th>
			<th>daudzums</th>
			<th>summa</th>
			<th>dzēst</th>
		</tr>
	</table>
	<div id="result">
		kopsumma: <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;
}

Nekavējoties iegūsim saites uz visiem vajadzīgajiem atzīmes mainīgajos:

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

Nokopējiet sev manis sniegtos koda sagataves.