Produktkalkylator i JavaScript

I det här avsnittet kommer vi att implementera en produktkalkylator. Den kommer att vara en tabell där användaren av vår webbplats kan lägga till sina inköp.

Låt inköpen läggas till med hjälp av ett formulär. Utöver det, låt oss lägga till en länk för att ta bort varje produkt. Vi skapar också möjlighet att redigera produktens namn, pris och antal. Låt sådan redigering ske genom dubbelklick på en cell i tabellen.

Låt den totala kostnaden för produkterna visas under tabellen. Låt oss se till att denna summa räknas om vid borttagning och redigering av produkter.

Här är ett exempel på vad som ska bli resultatet:

Här är HTML- och CSS-koden du kan använda för att lösa uppgiften:

<div id="parent">
	<div id="form">
		<input id="name" placeholder="namn">
		<input id="price" placeholder="pris">
		<input id="amount" placeholder="antal">
		<input id="add" type="button" value="lägg till">
	</div>
	
	<h2>Produkttabell:</h2>
	<table id="table">
		<tr>
			<th>namn</th>
			<th>pris</th>
			<th>antal</th>
			<th>summa</th>
			<th>ta bort</th>
		</tr>
	</table>
	<div id="result">
		totalsumma: <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;
}

Låt oss omedelbart hämta referenser till alla nödvändiga taggar 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');

Kopiera kodförlagen jag presenterat till dig.