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

Копирајте ги заготовките на кодот кои ги претставив.