Kalkulator produktów w JavaScript

W tej sekcji zaimplementujemy kalkulator produktów. Będzie to tabela, do której użytkownik naszej strony będzie wprowadzał swoje zakupy.

Niech zakupy będą wprowadzane za pomocą formularza. Oprócz tego, dla każdego produktu przewidzimy link do usunięcia. Zróbmy również możliwość edycji nazwy, ceny i ilości produktu. Niech taka edycja będzie odbywać się po podwójnym kliknięciu w komórkę tabeli.

Niech pod tabelą wyświetla się całkowity koszt produktów. Zróbmy tak, aby ta suma była przeliczana przy usuwaniu i przy edycji produktów.

Oto wzór tego, co powinno powstać:

Oto znaczniki, których możesz użyć przy rozwiązywaniu zadania:

<div id="parent">
	<div id="form">
		<input id="name" placeholder="nazwa">
		<input id="price" placeholder="cena">
		<input id="amount" placeholder="ilość">
		<input id="add" type="button" value="dodaj">
	</div>
	
	<h2>Tabela produktów:</h2>
	<table id="table">
		<tr>
			<th>nazwa</th>
			<th>cena</th>
			<th>ilość</th>
			<th>suma</th>
			<th>usuń</th>
		</tr>
	</table>
	<div id="result">
		całkowity wynik: <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;
}

Od razu pobierzmy referencje do wszystkich potrzebnych znaczników do zmiennych:

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

Skopiuj sobie przygotowane przeze mnie szablony kodu.