Elintarvikelaskuri JavaScriptillä

Tässä osiossa toteutamme elintarvikelaskurin. Se on taulukko, jonne käyttäjä voi syöttää ostoksensa.

Ostokset syötetään lomakkeen avulla. Lisäksi jokaiselle tuotteelle on poistolinkki. Luodaan myös mahdollisuus muokata tuotteen nimeä, hintaa ja määrää. Tämä muokkaus tapahtuu kaksoisnapsauttamalla taulukon solua.

Taulukon alle näytetään tuotteiden kokonaishinta. Varmistetaan, että summa lasketaan uudelleen kun tuotteita poistetaan tai muokataan.

Tässä on malli siitä, minkä pitäisi syntyä:

Tässä on merkintäkieli, jota voit käyttää tehtävän ratkaisemisessa:

<div id="parent">
	<div id="form">
		<input id="name" placeholder="nimi">
		<input id="price" placeholder="hinta">
		<input id="amount" placeholder="määrä">
		<input id="add" type="button" value="lisää">
	</div>
	
	<h2>Tuotetaulukko:</h2>
	<table id="table">
		<tr>
			<th>nimi</th>
			<th>hinta</th>
			<th>määrä</th>
			<th>summa</th>
			<th>poista</th>
		</tr>
	</table>
	<div id="result">
		kokonaissumma: <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;
}

Haetaan heti kaikki tarvittavat tagit muuttujiin:

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

Kopioi itsellesi esittämäni koodipohjat.