JavaScript-de önümler kalkulýatory

Bu bölümde biz önümleriň kalkulýatoryny amala aşyrarys. Ol, ulanyjylarymyzyň satyn alnan önümlerini girizýan tablisa hökmünde bolup durar.

Satyn alnan önümler forma ýardamynda girizilsin. Şeýle hem, her önüm üçin aýyrmak baglanyşygyny görläň. Şeýle hem önümiň adyny, bahasyny we sanyny redaktirlemek mümkinçiligini görläň. Bu redaktirleme tablisanyň ýaçkasyna iki gezek basylanda ýüze çyksyn.

Tablisanyň aşagynda önümleriň jemi bahasy görkezilsin. Bu jemi bahanyň önümler aýyrylanda we redaktirlenende ýeniden hasaplanýandygyny amala aşyryň.

Almaly netiçe şuňa meňzeş:

Mesele çözgünde ulanyp biljek sahypa dizaňyňyz şu ýerde:

<div id="parent">
	<div id="form">
		<input id="name" placeholder="ady">
		<input id="price" placeholder="bahasy">
		<input id="amount" placeholder="mukdary">
		<input id="add" type="button" value="gos">
	</div>
	
	<h2>Önümler tablisasy:</h2>
	<table id="table">
		<tr>
			<th>ady</th>
			<th>bahasy</th>
			<th>mukdary</th>
			<th>jemi</th>
			<th>aýyr</th>
		</tr>
	</table>
	<div id="result">
		umumy jemi: <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;
}

Derrew gerek bolan ähli tegler üçin baglanyşyklary üýtgeýjilere alalyň:

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

Size görkezen kod taýýarlamalaryny nusgalaň.