Payoo MFS Function

├── home.html ├── index.html ├── js ├── addMoney.js ├── addMoney2.js ├── cashOut.js ├── features.js ├── math.js ├── utilities.js └── utilities2.js └── tailwind.config.js /home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Payoo MFS Function 8 | 9 | 10 | 11 | 12 | 13 |

14 |

15 |

16 |

17 |

18 | 19 | 20 |

21 |

22 |

Account Balance

23 |

9400

24 |

25 |

26 |

27 | 28 |

29 | 30 | 31 | 32 |

33 | 34 |

35 | 36 |

37 | 56 |

57 | 58 | 59 | 80 | 81 | 82 | 83 | 89 | 90 |

91 |

92 |

93 |

94 | 95 | 96 | 97 | 98 | 99 | 100 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/payoo-mfs-functional/6c01a34a00945acf98c36ad2f08ec3d00d747476/index.html -------------------------------------------------------------------------------- /js/addMoney.js: -------------------------------------------------------------------------------- 1 | /** 2 | * How to get a number from an input field 3 | * 1. create a variable 4 | * 2. right side document.getElementById(id) 5 | * 3. .value 6 | * 4. parseFloat 7 | */ 8 | 9 | // console.log('add money loaded'); 10 | document.getElementById('btn-add-money') 11 | .addEventListener('click', function (event) { 12 | event.preventDefault(); 13 | 14 | console.log('add money button clicked'); 15 | 16 | // getInputFieldValueById(); 17 | // const addMoney = getInputFieldValueById(); 18 | // console.log('add money value', addMoney); 19 | // const addMoney = document.getElementById('input-add-money').value; 20 | // const addMoneyNumber = parseFloat(addMoney); 21 | 22 | const addMoney = getInputFieldValueById('input-add-money'); 23 | const pinNumber = getInputFieldValueById('input-pin-number'); 24 | console.log('add money with parameter', addMoney, pinNumber) 25 | 26 | 27 | }); -------------------------------------------------------------------------------- /js/addMoney2.js: -------------------------------------------------------------------------------- 1 | document.getElementById('btn-add-money') 2 | .addEventListener('click', function (event) { 3 | event.preventDefault(); 4 | 5 | const addMoney = getInputFieldValueById('input-add-money'); 6 | const pinNumber = getInputFieldValueById('input-pin-number'); 7 | 8 | if(isNaN(addMoney)){ 9 | alert('Failed to add money'); 10 | return; 11 | } 12 | 13 | // wrong way to verify. do not try it at your serious website 14 | if(pinNumber === 1234){ 15 | const balance = getTextFieldValueById('account-balance'); 16 | const newBalance = balance + addMoney; 17 | 18 | document.getElementById('account-balance').innerText = newBalance; 19 | 20 | // add to transaction history 21 | const p = document.createElement('p'); 22 | p.innerText = `Added: ${addMoney} Tk. New Balance: ${newBalance}`; 23 | console.log(p); 24 | 25 | // should be a common function 26 | document.getElementById('transaction-container').appendChild(p); 27 | } 28 | else{ 29 | alert('Failed to add the money.') 30 | } 31 | 32 | }) -------------------------------------------------------------------------------- /js/cashOut.js: -------------------------------------------------------------------------------- 1 | document.getElementById('btn-cash-out') 2 | .addEventListener('click', function(event){ 3 | event.preventDefault(); 4 | 5 | const cashOut = getInputFieldValueById('input-cash-out'); 6 | const pinNumber = getInputFieldValueById('input-cash-out-pin'); 7 | // console.log('inside the click handler', cashOut, pinNumber) 8 | 9 | if(isNaN(cashOut)){ 10 | alert('Failed to cash out.'); 11 | return; 12 | } 13 | 14 | if(pinNumber === 1234){ 15 | const balance = getTextFieldValueById('account-balance'); 16 | 17 | if(cashOut > balance){ 18 | alert('You do not have enough money to cash out'); 19 | return; 20 | } 21 | 22 | const newBalance = balance - cashOut; 23 | document.getElementById('account-balance').innerText = newBalance; 24 | 25 | // add to transaction history 26 | const div = document.createElement('div'); 27 | div.classList.add('bg-yellow-300'); 28 | div.innerHTML = ` 29 |

Cash Out

30 |

${cashOut} withdraw. New Balance ${newBalance}

31 | ` 32 | 33 | document.getElementById('transaction-container').appendChild(div); 34 | } 35 | else{ 36 | alert('No money for you.... DGM.') 37 | } 38 | }) -------------------------------------------------------------------------------- /js/features.js: -------------------------------------------------------------------------------- 1 | document.getElementById('show-add-money-form') 2 | .addEventListener('click', function () { 3 | console.log('show add money button clicked'); 4 | showSectionById('add-money-form'); 5 | }); 6 | 7 | 8 | document.getElementById('show-cash-out-form') 9 | .addEventListener('click', function () { 10 | showSectionById('cash-out-form'); 11 | }); 12 | 13 | document.getElementById('show-transaction-history') 14 | .addEventListener('click', function () { 15 | 16 | showSectionById('transaction-section'); 17 | 18 | }) -------------------------------------------------------------------------------- /js/math.js: -------------------------------------------------------------------------------- 1 | function doubleIt (num){ 2 | const result = num * 2; 3 | return result; 4 | } -------------------------------------------------------------------------------- /js/utilities.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Common Shared functions here 3 | */ 4 | // console.log('utilities loaded'); 5 | 6 | 7 | // function getInputFieldValueById(){ 8 | // console.log('will get value by id'); 9 | // const addMoney = document.getElementById('input-add-money').value; 10 | // return addMoney; 11 | // } 12 | 13 | 14 | function getInputFieldValueById(id){ 15 | const inputValue = document.getElementById(id).value; 16 | return inputValue; 17 | } -------------------------------------------------------------------------------- /js/utilities2.js: -------------------------------------------------------------------------------- 1 | function getInputFieldValueById(id){ 2 | const inputValue = document.getElementById(id).value; 3 | const inputNumber = parseFloat(inputValue); 4 | 5 | return inputNumber; 6 | } 7 | 8 | 9 | function getTextFieldValueById(id){ 10 | const textValue = document.getElementById(id).innerText; 11 | const textNumber = parseFloat(textValue); 12 | return textNumber; 13 | } 14 | 15 | 16 | function showSectionById(id){ 17 | // hide all the sections 18 | document.getElementById('add-money-form').classList.add('hidden'); 19 | document.getElementById('cash-out-form').classList.add('hidden'); 20 | document.getElementById('transaction-section').classList.add('hidden'); 21 | 22 | // show the section with the provide id as parameter 23 | document.getElementById(id).classList.remove('hidden'); 24 | } -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/payoo-mfs-functional/6c01a34a00945acf98c36ad2f08ec3d00d747476/tailwind.config.js --------------------------------------------------------------------------------

Transaction History

Cash Out