Калкулатор за продукти на 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');

Копирайте си представените от мен готови кодови части.