Αριθμομηχανή Προϊόντων σε 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');

Αντιγράψτε στον εαυτό σας τα πρότυπα κώδικα που παρουσίασα.