JavaScript'te Ürün Hesaplayıcı

Bu bölümde bir ürün hesaplayıcı uygulaması gerçekleştireceğiz. Bu, web sitemizin kullanıcılarının alışverişlerini girebileceği bir tablo olacak.

Alışverişlerin bir form aracılığıyla girilmesini sağlayalım. Ayrıca her ürün için bir silme bağlantısı sağlayalım. Ayrıca ürün adını, fiyatını ve miktarını düzenleme imkanı da sağlayalım. Bu tür bir düzenlemenin tablo hücresine çift tıklanarak yapılmasını sağlayalım.

Tablonun altında ürünlerin toplam maliyetinin görüntülenmesini sağlayalım. Bu toplamın ürünler silindiğinde ve düzenlendiğinde yeniden hesaplanmasını sağlayalım.

Elde edilmesi gerekenlerin bir örneği:

Görevi çözerken kullanabileceğiniz işte biçimlendirme:

<div id="parent">
	<div id="form">
		<input id="name" placeholder="ad">
		<input id="price" placeholder="fiyat">
		<input id="amount" placeholder="miktar">
		<input id="add" type="button" value="ekle">
	</div>
	
	<h2>Ürün Tablosu:</h2>
	<table id="table">
		<tr>
			<th>ad</th>
			<th>fiyat</th>
			<th>miktar</th>
			<th>tutar</th>
			<th>sil</th>
		</tr>
	</table>
	<div id="result">
		genel toplam: <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;
}

Hemen ihtiyaç duyulan tüm etiketlerin referanslarını değişkenlerde alalım:

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

Size sunduğum kod taslaklarını kendinize kopyalayın.