├── .vscode └── launch.json ├── index.html └── js ├── deposit.js ├── utilities.js └── withdraw.js /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "pwa-chrome", 9 | "request": "launch", 10 | "name": "Launch Chrome against localhost", 11 | "url": "http://127.0.0.1:5500/index.html", 12 | "webRoot": "${workspaceFolder}" 13 | } 14 | ] 15 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Functional Baap Er Bank 8 | 9 | 10 | 11 |
12 |

Functional Baap-Er-Bank!!!

13 |
14 |
15 | 16 |
17 |
18 |
19 |

Deposit

20 |

$00

21 |
22 |
23 |

Withdraw

24 |

$00

25 |
26 |
27 |

Balance

28 |

$1240

29 |
30 |
31 |
32 | 33 |
34 |
35 |
36 |

Your Deposit

37 | 38 | 39 |
40 |
41 |

Your Withdraw

42 | 43 | 44 |
45 |
46 |
47 |
48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /js/deposit.js: -------------------------------------------------------------------------------- 1 | // DRY ---> Do not Repeat yourself 2 | document.getElementById('btn-deposit').addEventListener('click', function () { 3 | /* 4 | 1. get the element by id 5 | 2. get the value from the element 6 | 3. convert string value to a number 7 | */ 8 | const newDepositAmount = getInputFieldValueById('deposit-field'); 9 | /* 10 | 1. get previous deposit total by id 11 | */ 12 | const previousDepositTotal = getTextElementValueById('deposit-total'); 13 | 14 | // calculate new deposit total 15 | const newDepositTotal = previousDepositTotal + newDepositAmount; 16 | // set deposit total value 17 | setTextElementValueById('deposit-total', newDepositTotal); 18 | 19 | // get previous balance by using the function 20 | const previousBalanceTotal = getTextElementValueById('balance-total') 21 | const newBalanceTotal = previousBalanceTotal + newDepositAmount; 22 | setTextElementValueById('balance-total', newBalanceTotal); 23 | }) -------------------------------------------------------------------------------- /js/utilities.js: -------------------------------------------------------------------------------- 1 | function getInputFieldValueById(inputFieldId) { 2 | const inputField = document.getElementById(inputFieldId); 3 | const inputFieldValueString = inputField.value; 4 | const inputFieldValue = parseFloat(inputFieldValueString); 5 | inputField.value = ''; 6 | return inputFieldValue; 7 | } 8 | 9 | function getTextElementValueById(elementId) { 10 | const textElement = document.getElementById(elementId); 11 | const textElementValueString = textElement.innerText; 12 | const textElementValue = parseFloat(textElementValueString); 13 | return textElementValue; 14 | } 15 | 16 | function setTextElementValueById(elementId, newValue){ 17 | const textElement = document.getElementById(elementId); 18 | textElement.innerText = newValue; 19 | } -------------------------------------------------------------------------------- /js/withdraw.js: -------------------------------------------------------------------------------- 1 | /* 2 | 1. add withdraw button event handler 3 | 2. get withdraw amount by using getInputFieldValueById function 4 | 3. get previous withdraw amount by using getTextElementValueById function 5 | 4. calculate new withdraw Total and set the value 6 | 4-5: set new withdraw total by using setTextElementValueById function 7 | 5. get previous balance total by using getTextElementValueById function 8 | 6. calculate new balance total 9 | 7. set balance total using setTextElementValueById 10 | */ 11 | 12 | document.getElementById('btn-withdraw').addEventListener('click', function(){ 13 | const newWithdrawAmount = getInputFieldValueById('withdraw-field'); 14 | const previousWithdrawTotal = getTextElementValueById('withdraw-total'); 15 | const newWithdrawTotal = previousWithdrawTotal + newWithdrawAmount; 16 | setTextElementValueById('withdraw-total', newWithdrawTotal); 17 | const previousBalanceTotal = getTextElementValueById('balance-total'); 18 | const newBalanceTotal = previousBalanceTotal - newWithdrawAmount; 19 | setTextElementValueById('balance-total', newBalanceTotal); 20 | }) --------------------------------------------------------------------------------