პროდუქტების კალკულატორი JavaScript-ში

ამ განყოფილებაში ჩვენ განვახორციელებთ პროდუქტების კალკულატორს. ის იქნება ცხრილი, რომელშიც ჩვენი საიტის მომხმარებელი შეიყვანს საკუთარ ყიდვებს.

დაე, ყიდვები შევიდეს ფორმის საშუალებით. გარდა ამისა, ყოველი პროდუქტისთვის გავათვალისწინებთ ბმულს წაშლისთვის. ასევე გავაკეთებთ რედაქტირების შესაძლებლობას პროდუქტის სახელის, ფასის და რაოდენობისთვის. დაე, ასეთი რედაქტირება მოხდეს ცხრილის უჯრაზე ორმაგი დაწკაპუნებით.

დაე, ცხრილის ქვემოთ გამოისახოს პროდუქტების საერთო ღირებულება. მოვაწყოთ ისე, რომ ეს ჯამი გადაითვალოს პროდუქტების წაშლისა და რედაქტირების დროს.

აი, რა უნდა მივიღოთ:

აი, ვერსია, რომელიც შეგიძლიათ გამოიყენოთ ამოცანის ამოსახსნელად:

<div id="parent">
	<div id="form">
		<input id="name" placeholder="სახელი">
		<input id="price" placeholder="ფასი">
		<input id="amount" placeholder="რაოდენობა">
		<input id="add" type="button" value="დამატება">
	</div>
	
	<h2>პროდუქტების ცხრილი:</h2>
	<table id="table">
		<tr>
			<th>სახელი</th>
			<th>ფასი</th>
			<th>რაოდ.</th>
			<th>ჯამი</th>
			<th>წაშლა</th>
		</tr>
	</table>
	<div id="result">
		საერთო ჯამი: <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;
}

მოდით, დაუყოვნებლივ მივიღოთ ბმულები ყველა საჭირო ტეგზე ცვლადებში:

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

დააკოპირეთ თქვენთვის მე მიერ წარმოდგენილი კოდის შაბლონები.