Calcolatore di prodotti in JavaScript

In questa sezione implementeremo un calcolatore di prodotti. Sarà una tabella in cui l'utente del nostro sito potrà inserire i propri acquisti.

Lasciamo che gli acquisti vengano inseriti tramite un modulo. Inoltre, per ogni prodotto prevediamo un link per l'eliminazione. Implementiamo anche la possibilità di modificare il nome, il prezzo e la quantità del prodotto. Lasciamo che tale modifica avvenga con un doppio clic sulla cella della tabella.

Sotto la tabella verrà visualizzato il costo totale dei prodotti. Facciamo in modo che questa somma venga ricalcolata all'eliminazione e alla modifica dei prodotti.

Ecco un esempio di ciò che dovrebbe risultare:

Ecco il markup che puoi utilizzare per risolvere il problema:

<div id="parent">
	<div id="form">
		<input id="name" placeholder="nome">
		<input id="price" placeholder="prezzo">
		<input id="amount" placeholder="quantità">
		<input id="add" type="button" value="aggiungi">
	</div>
	
	<h2>Tabella prodotti:</h2>
	<table id="table">
		<tr>
			<th>nome</th>
			<th>prezzo</th>
			<th>quantità</th>
			<th>totale</th>
			<th>elimina</th>
		</tr>
	</table>
	<div id="result">
		totale generale: <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;
}

Per prima cosa otteniamo i riferimenti a tutti gli elementi necessari nelle variabili:

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

Copia il codice preparato che ti ho fornito.