Kikokotoo cha Bidhaa kwenye JavaScript

Katika sehemu hii tutatekeleza kikokotoo cha bidhaa. Itakuwaje meza, ambayo mtumiaji wa tovuti yetu ataingiza ununuzi zake.

Acha ununuzi iingizwe kwa kutumia fomu. Zaidi ya hayo, kwa kila bidhaa tutatenga kiungo cha kufuta. Pia tutafanya uwezekano wa kuhariri jina, bei na kiasi cha bidhaa. Acha uhariri kama huo ufanyike kwa kubofya mara mbili kwenye kiini cha meza.

Acha chini ya meza itolewe jumla ya gharama ya bidhaa. Tuifanye jumla hiyo ihesabiwe upya wakati wa kufuta na wakati wa kuhariri bidhaa.

Hapa kuna mfano wa kile kinachopaswa kupatikana:

Hapa kuna muundo wa wavuti ambao unaweza kutumika wakati wa kutatua tatizo:

<div id="parent">
	<div id="form">
		<input id="name" placeholder="jina">
		<input id="price" placeholder="bei">
		<input id="amount" placeholder="kiasi">
		<input id="add" type="button" value="ongeza">
	</div>
	
	<h2>Meza ya bidhaa:</h2>
	<table id="table">
		<tr>
			<th>jina</th>
			<th>bei</th>
			<th>kiasi</th>
			<th>jumla</th>
			<th>futa</th>
		</tr>
	</table>
	<div id="result">
		Jumla ya jumla: <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;
}

Mara moja tupate viungo kwa vitambulisho vyote vinavyohitajika kwenye anuwai:

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

Inakili kwako mwenyewe maandalizi ya msimbo niliyowasilisha.