জাভাস্ক্রিপ্টে পণ্য ক্যালকুলেটর

এই বিভাগে আমরা একটি পণ্য ক্যালকুলেটর বাস্তবায়ন করব। এটি একটি টেবিল হবে, যেখানে আমাদের ওয়েবসাইটের ব্যবহারকারী তাদের ক্রয় তালিকাভুক্ত করবে।

ক্রয়গুলি একটি ফর্মের মাধ্যমে যোগ করা হোক। এছাড়াও প্রতিটি পণ্যের জন্য মুছে ফেলার একটি লিঙ্ক প্রদান করা হোক। পণ্যের নাম, মূল্য এবং পরিমাণ সম্পাদনা করার ক্ষমতাও তৈরি করা হোক। যেন টেবিলের একটি সেলে ডাবল ক্লিক করলে এই সম্পাদনা ঘটে।

টেবিলের নিচে পণ্যের মোট মূল্য দেখানো হোক। এমনভাবে তৈরি করা হোক যেন পণ্য মুছে ফেলা বা সম্পাদনা করার সময় এই যোগফল পুনরায় গণনা করা হয়।

যা পাওয়া উচিত তার একটি নমুনা এখানে:

সমস্যা সমাধানের সময় আপনি নিম্নলিখিত মার্কআপ ব্যবহার করতে পারেন:

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

আমার প্রদত্ত কোডের খসড়াগুলি আপনার কাছে অনুলিপি করুন।