JavaScript-də Məhsul Kalkulyatoru

Bu bölmədə biz məhsul kalkulyatorunu həyata keçirəcəyik. O, istifadəçinin öz alış-verişlərini daxil edəcəyi bir cədvəl şəklində olacaq.

Alış-verişlər forma vasitəsilə daxil edilsin. Bundan əlavə, hər bir məhsul üçün silmə linki nəzərdə tutaq. Həmçinin məhsulun adını, qiymətini və miqdarını redaktə etmə imkanını yaradaq. Bu redaktə cədvəl xanasına cüt klikləməklə baş versin.

Cədvəlin altında məhsulların ümumi dəyəri göstərilsin. Bu məbləğin məhsullar silindikdə və ya redaktə edildikdə yenidən hesablanmasını təmin edək.

Alınması lazım olan nəticənin nümunəsi:

Məsələni həll edərkən istifadə edə biləcəyiniz verstka:

<div id="parent">
	<div id="form">
		<input id="name" placeholder="ad">
		<input id="price" placeholder="qiymət">
		<input id="amount" placeholder="miqdar">
		<input id="add" type="button" value="əlavə et">
	</div>
	
	<h2>Məhsul Cədvəli:</h2>
	<table id="table">
		<tr>
			<th>ad</th>
			<th>qiymət</th>
			<th>miqdar</th>
			<th>məbləğ</th>
			<th>sil</th>
		</tr>
	</table>
	<div id="result">
		ümumi nəticə: <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;
}

Dərhal bizə lazım olan bütün teqlərə dəyişənlərdə istinad əldə edək:

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

Təqdim etdiyim kod boşqablarını özünüzə kopyalayın.