जावास्क्रिप्ट में उत्पाद कैलकुलेटर
इस खंड में हम एक उत्पाद कैलकुलेटर लागू करेंगे। यह एक तालिका होगी, जिसमें हमारी वेबसाइट का उपयोगकर्ता अपनी खरीदारी दर्ज करेगा।
मान लीजिए कि खरीदारी एक फॉर्म के माध्यम से दर्ज की जाती है। इसके अलावा, प्रत्येक उत्पाद के लिए हटाने का लिंक प्रदान करेंगे। हम उत्पाद के नाम, मूल्य और मात्रा को संपादित करने की क्षमता भी बनाएंगे। मान लीजिए कि ऐसा संपादन तालिका सेल पर डबल-क्लिक करके होता है।
मान लीजिए कि तालिका के नीचे उत्पादों की कुल लागत प्रदर्शित की जाती है। आइए इसे इस प्रकार बनाएं कि उत्पादों को हटाने और संपादित करने पर यह राशि पुनर्गणना हो जाए।
यहाँ एक नमूना है कि क्या होना चाहिए:
यहाँ वह मार्कअप है जिसका आप समस्या को हल करते समय उपयोग कर सकते हैं:
<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');
मेरे द्वारा प्रस्तुत किए गए कोड स्टब्स की प्रतिलिपि बनाएँ।
