|
1 |
| -// প্রয়োজনীয় সব ইলিমেন্ট সিলেক্ট করে নিন |
2 | 1 | const tipCalculator = document.querySelector('.tip-calculator');
|
3 | 2 | const selectTotal = document.querySelector('.amount_total span');
|
4 | 3 | const selectTipPerPerson = document.querySelector('.tip_per_person span');
|
5 | 4 |
|
6 |
| -// ডাটা স্ট্রাকচার, ইনপুট ফিল্ডের নামের সাথে মিল রেখে |
7 | 5 | const data = {
|
8 | 6 | bill: 0,
|
9 | 7 | tip: 0,
|
10 | 8 | person: 1
|
11 | 9 | }
|
12 | 10 |
|
13 |
| -// ফর্মের ইনপুট ফিল্ডে কোনোরকম পরিবর্তন আসলেই আমরা অ্যাকশন নিবো |
14 | 11 | tipCalculator.addEventListener('change', (e) => {
|
15 |
| - // ফর্মের ইনপুট ঠিক আছে কি নেই সেটার উপর ভিত্তি করে এখানে অ্যাকশন নিবো |
16 | 12 | if(validateInput(e.target.value)) {
|
17 |
| - // ইনপুট ঠিক থাকলে আমরা আমাদের এরর ক্লাসটা সরিয়ে নিবো ইনপুট থেকে |
18 | 13 | e.target.classList.remove('err');
|
19 | 14 |
|
20 |
| - // এখন আমরা আমাদের টার্গেগেটেড ইলিমেন্টটার ভ্যালু অ্যাসাইন করবো(এজন্যেই ডাটা স্ট্রাকচারের কীগুলোর নাম ইনপুট ফিল্ডের নামের সাথে মিল রেখেছি), আর সেই ভ্যালো যাতে ফ্লোট নাম্বার হয় সেটাও খেয়াল রাখবো |
21 | 15 | data[e.target.name] = parseFloat(e.target.value);
|
22 | 16 |
|
23 |
| - // টোটাল টিপ কতো আসে সেটা হিসেব করা |
24 | 17 | const tip = (data.bill * data.tip) / 100;
|
25 | 18 |
|
26 |
| - // টোটাল হিসেব করবো |
27 | 19 | let total = data.bill + tip;
|
28 |
| - // পার পার্সন হিসেব করা |
29 | 20 | total = total / data.person;
|
30 |
| - // টোটালটার দশমিককে ফিক্সড করে দেওয়া |
31 | 21 | total = total.toFixed(2);
|
32 |
| - // টোটালটা আমাদের ডকুমেন্ট এ শো করাবো |
33 | 22 | selectTotal.textContent = total;
|
34 | 23 |
|
35 |
| - // পার পার্শনের টিপ কতো আসে সেটা হিসেব করা |
36 | 24 | let tip_per_person = tip / data.person;
|
37 |
| - // দশমিককে ফিক্সড করে দেওয় |
38 | 25 | tip_per_person = tip_per_person.toFixed(2);
|
39 |
| - // ডকুমেন্ট এ শো করানো |
40 | 26 | selectTipPerPerson.textContent = tip_per_person;
|
41 | 27 |
|
42 | 28 | } else {
|
43 |
| - // ইনপুট ভ্যালিড না হলে এরর ক্লাস লাগাবো ইউজারকে সুন্দর একটা ভুল হয়েছে ইফেক্ট দেওয়ার জন্যে |
44 | 29 | e.target.classList.add('err');
|
45 | 30 | }
|
46 | 31 | });
|
47 | 32 |
|
48 |
| -// ইনপুট ভ্যালিডেট করা, ইনপুট আসলেই নাম্বার কিনা |
49 | 33 | const validateInput = input => {
|
50 | 34 | return (/^\d+$/).test(input);
|
51 | 35 | }
|
0 commit comments