JavaScript-те өнімдер калькуляторы

Бұл бөлімде біз өнімдер калькуляторын жасаймыз. Ол кесте түрінде болады, олға сайттың пайдаланушысы өз сатып алуларын енгізе алады.

Сатып алулар форма арқылы енгізілсін. Сонымен қатар, әрбір өнім үшін жою сілтемесін қарастырайық. Сонымен қатар, өнімнің атауын, бағасын және санын өңдеу мүмкіндігін жасайық. Мұндай өңдеу кесте ұяшығына қос түрту арқылы жүзеге асырылсын.

Кестенің астында өнімдердің жалпы құны көрсетілсін. Бұл соманың өнімдерді жою және өңдеу кезінде қайта есептелетіндігін жасайық.

Мынау шығуы керек нәтиженің үлгісі:

Мынау есепті шығару кезінде пайдалана алатын верстка:

<div id="parent">
	<div id="form">
		<input id="name" placeholder="атауы">
		<input id="price" placeholder="бағасы">
		<input id="amount" placeholder="саны">
		<input id="add" type="button" value="қосу">
	</div>
	
	<h2>Өнімдер кестесі:</h2>
	<table id="table">
		<tr>
			<th>атауы</th>
			<th>бағасы</th>
			<th>саны</th>
			<th>сомасы</th>
			<th>жою</th>
		</tr>
	</table>
	<div id="result">
		жалпы итог: <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;
}

Барлық қажетті тегтерге сілтемелерді бірден айнымалыларға алайық:

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

Мен берген код дайындарын өзіңізге көшіріп алыңыз.