JSFiddle - React, Tailwind, and code Playground

by MegaScience

HTML

<table border = "1" align = "left">
            <caption>ATM 360</caption>
            <tr>
                <td colspan = "4"><input disabled type = "text" id = "display" value = "Type amount and select operation" size = "30"/></td></tr>
            <tr>
                <td><button onclick = 'displayNumbers(1);'> 1 </button></td>
                <td><button onclick = 'displayNumbers(2);'> 2 </button></td>
                <td><button onclick = 'displayNumbers(3);'> 3 </button></td>
                <td><button onclick = 'withdraw();' id="Withdrawal" style = "background-color: black; color: white;"> Withdrawal </button></td></tr>
            <tr>
                <td><button onclick = 'displayNumbers(4);'> 4 </button></td>
                <td><button onclick = 'displayNumbers(5);'> 5 </button></td>
                <td><button onclick = 'displayNumbers(6);'> 6 </button></td>
                <td><button onclick = 'deposit();' id="Deposit" style = "background-color: blue; color: white;"> Deposit </button></td></tr>
            <tr>
                <td><button onclick = 'displayNumbers(7);'> 7 </button></td>
                <td><button onclick = 'displayNumbers(8);'> 8 </button></td>
                <td><button onclick = 'displayNumbers(9);'> 9 </button></td>
                <td><button onclick = 'retype();' id="Retype" style = "background-color: green; color: white;"> Retype </button></td></tr>
            <tr>
                <td></td>
                <td><button onclick = 'displayNumbers(0);'> 0 </button></td>
                <td></td>
                <td><button onclick = 'end();' id="End" style = "background-color: red; color: white;"> End </button></td></tr>

CSS

<style>
            table {margin-left: auto; margin-right: auto; text-align: left; border-style: solid;}
            #display {
              background-color: greenyellow;
            }
            button {
              font-weight: bold; 
            }
            
            </style>

JavaScript

var bal = 1000.00;
        var finalNumber = '';
        var i = -1;
        var idArr = new Array(10);
        var typeArr = new Array(10);
        var amountArr = new Array(10);
        var datetimeArr = new Array(10);
        function displayNumbers(number){
            finalNumber = finalNumber + number;
            display.value = finalNumber;
        }
        function withdraw(){
        		var fN = Number(finalNumber);
            if(fN > 0) {
              bal = bal - fN;
              display.value = 'New balance is: $' + bal;
              i = i + 1;
              idArr[i] = i + 1;
              typeArr[i] = "Withdrawl";
              amountArr[i] = fN;
              datetimeArr[i] = Date();
              finalNumber = '';
            }
        }
        function deposit(){
        		var fN = Number(finalNumber);
            if(fN > 0) {
              bal = bal + fN;
              display.value = 'New balance is: $' + bal;
              i = i + 1;
              idArr[i] = i + 1;
              typeArr[i] = "Deposit";
              amountArr[i] = fN;
              datetimeArr[i] = Date();
              finalNumber = '';
            }
        }
        function retype(){
            finalNumber = '';
            display.value = 'Type amount and select operation';
        }
        function end(){
        	document.write('<table width="100%">');
        	document.write('<caption><h3>Transaction History</h3></caption>');
        document.write('<tr><td>#</td><td>Type</td><td>Amount</td><td>Day/Time</td></tr>');
          for(var j = 0; j < i; j++) {
        		document.write('<tr><td>' + idArr[j] + '</td><td>' + typeArr[j] + '</td><td>' + amountArr[j] + '</td><td>' + datetimeArr[j] + '</td></tr>');
          }
        	document.write('</table>');
        }