JavaScript භාවිතයෙන් ආහාර ගණනය කිරීමේ යන්ත්‍රය

මෙම අංශයේදී අපි ආහාර ගණනය කිරීමේ යන්ත්‍රයක් ක්‍රියාත්මක කරන්නෙමු. එය වගුවක් වනු ඇත, අපගේ වෙබ් අඩවියේ පරිශීලකයා තම සිල්ලර භාණ්ඩ ඇතුළත් කරනු ඇත.

සිල්ලර භාණ්ඩ ආකෘතියක් භාවිතයෙන් ඇතුළත් කරනු ලැබේවා. ඊට අමතරව, සෑම නිෂ්පාදනයක් සඳහාම මකාදැමීමේ සබැඳියක් ප්‍රදානය කරමු. නිෂ්පාදනයේ නම, මිල සහ ප්‍රමාණය සංස්කරණය කිරීමේ හැකියාව ද සකසමු. එවැනි සංස්කරණයක් සිදුවන්නේ වගුවේ සෛලයක් දෙවරක් ක්ලික් කිරීමෙන් වීමට ඉඩ දෙමු.

වගුවට පහළින් නිෂ්පාදනවල සම්පූර්ණ වියදම ප්‍රදර්ශනය කරනු ලැබේවා. මෙම එකතුව නැවත ගණනය කරනු ලබන්නේ නිෂ්පාදන මකාදැමීමේදී සහ සංස්කරණය කිරීමේදී වන පරිදි සකසමු.

ලැබිය යුතු දෙයට නිදර්ශනය මෙන්න:

කාර්යය විසඳීමේදී ඔබට භාවිතා කළ හැකි HTML සැකිල්ල මෙන්න:

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

මා විසින් ඉදිරිපත් කරන ලද කේත සැකිලි ඔබ වෙත පිටපත් කර ගන්න.