Toiduainete kalkulaator JavaScriptis

Selles jaotises realiseerime toiduainete kalkulaatori. See on tabel, millele meie saidi kasutaja saab sisestada oma ostud.

Ostetud kaupade lisamine toimugu vormi kaudu. Lisaks iga toote jaoks teeme lingi kustutamiseks. Teeme ka võimaluse nime, hinda ja koguse muutmiseks. Las see muutmine toimub topeltklõpsuga tabeli lahtril.

Tabeli all kuvatakse toodete kogumaksumus. Teeme nii, et see summa uuendatakse toodete kustutamisel ja muutmisel.

Siin on näidis sellest, mis peaks välja tulema:

Siin on HTML ja CSS, mida võite kasutada ülesande lahendamisel:

<div id="parent">
	<div id="form">
		<input id="name" placeholder="nimi">
		<input id="price" placeholder="hind">
		<input id="amount" placeholder="kogus">
		<input id="add" type="button" value="lisa">
	</div>
	
	<h2>Toodete tabel:</h2>
	<table id="table">
		<tr>
			<th>nimi</th>
			<th>hind</th>
			<th>kogus</th>
			<th>summa</th>
			<th>kustuta</th>
		</tr>
	</table>
	<div id="result">
		kogu kokku: <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;
}

Kõigepealt hankigem viited kõikidele vajalikele siltidele muutujatesse:

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

Kopeerige endale minu poolt esitatud koodi mallid.