Produktberegner i JavaScript

I dette afsnit vil vi implementere en produktberegner. Den vil være en tabel, hvor brugeren af vores hjemmeside kan indtaste deres indkøb.

Lad indkøbene blive tilføjet via en formular. Derudover skal der være en slettelink for hvert produkt. Vi laver også mulighed for redigering af produktets navn, pris og antal. Lad sådan redigering foregå ved dobbeltklik på en celle i tabellen.

Lad den samlede pris for produkterne vises under tabellen. Lad os sørge for, at denne sum genberegnes ved sletning og ved redigering af produkter.

Her er et eksempel på, hvad der skal resultere:

Her er den HTML-struktur, du kan bruge når du løser opgaven:

<div id="parent">
	<div id="form">
		<input id="name" placeholder="navn">
		<input id="price" placeholder="pris">
		<input id="amount" placeholder="antal">
		<input id="add" type="button" value="tilføj">
	</div>
	
	<h2>Produkttabel:</h2>
	<table id="table">
		<tr>
			<th>navn</th>
			<th>pris</th>
			<th>ant</th>
			<th>beløb</th>
			<th>slet</th>
		</tr>
	</table>
	<div id="result">
		samlet total: <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;
}

Lad os straks få referencer til alle de nødvendige tags i variabler:

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

Kopier de viste kodeeksempler til dig selv.