Produktrechner in JavaScript

In diesem Abschnitt implementieren wir einen Produktrechner. Dieser wird eine Tabelle sein, in die der Benutzer unserer Website seine Einkäufe eintragen kann.

Die Einkäufe sollen über ein Formular erfasst werden. Zusätzlich sehen wir für jedes Produkt einen Link zum Löschen vor. Wir werden auch die Möglichkeit zur Bearbeitung des Produktnamens, des Preises und der Menge implementieren. Diese Bearbeitung soll durch einen Doppelklick auf die entsprechende Tabellenzelle erfolgen.

Unter der Tabelle soll der Gesamtpreis der Produkte ausgegeben werden. Wir sorgen dafür, dass dieser Gesamtbetrag neu berechnet wird, beim Löschen und beim Bearbeiten der Produkte.

Hier ist ein Beispiel, wie das Ergebnis aussehen soll:

Hier ist das HTML-Gerüst, das Sie bei der Lösung der Aufgabe verwenden können:

<div id="parent">
	<div id="form">
		<input id="name" placeholder="Name">
		<input id="price" placeholder="Preis">
		<input id="amount" placeholder="Menge">
		<input id="add" type="button" value="hinzufügen">
	</div>
	
	<h2>Produkttabelle:</h2>
	<table id="table">
		<tr>
			<th>Name</th>
			<th>Preis</th>
			<th>Menge</th>
			<th>Summe</th>
			<th>löschen</th>
		</tr>
	</table>
	<div id="result">
		Gesamtsumme: <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;
}

Lassen Sie uns zunächst Referenzen auf alle benötigten Elemente in Variablen speichern:

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

Kopieren Sie sich die von mir bereitgestellten Code-Vorlagen.