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(){
            bal = bal - Number(finalNumber);
            display.value = 'New balance is: $' + bal;
            i = i + 1;
            idArr[i] = i + 1;
            typeArr[i] = "Withdrawl";
            amountArr[i] = finalNumber;
            datetimeArr[i] = Date();
            finalNumber = '';
        }
        function deposit(){
            bal = bal + Number(finalNumber);
            display.value = 'New balance is: $' + bal;
            i = i + 1;
            idArr[i] = i + 1;
            typeArr[i] = "Deposit";
            amountArr[i] = finalNumber;
            datetimeArr[i] = Date();
            finalNumber = '';
        }
        function retype(){
            finalNumber = '';
            display.value = 'Type amount and select operation';
        }
        function end(){}