JSFiddle - React, Tailwind, and code Playground

by imsky

HTML

<h1>Calculator</h1>
<input id="output">
<table>
    <tr>
        <td><button>1</button></td>        
        <td><button>2</button></td>
        <td><button>3</button></td>
        <td><button>4</button></td>        
        <td><button>5</button></td>
        <td><button>6</button></td>
    </tr>
     <tr>
        <td><button>7</button></td>        
        <td><button>8</button></td>
        <td><button>9</button></td>
        <td><button>0</button></td>        
        <td><button>+</button></td>
        <td><button>-</button></td>
    </tr>
    <tr>
        <td><button>*</button></td>        
        <td><button>/</button></td>
        <td colspan="4"><button style="width:100%">=</button></td>
    </tr>
</table>

CSS

body {font-family:sans-serif;color:#111}

JavaScript

var stack = [];
var numacc = 0;

function updateOutput() {
    if (stack[stack.length - 1] == "=") {
        var currnum = "";
        var numstack = [];
        var currop = null;
        $.each(stack, function(i, v) {
            if (typeof v == "number") {
                currnum += "" + v;
            }
            else {
                numstack.push(parseInt(currnum));
                currnum = "";
                if(currop == null){
                    currop = v;
                }
                else{
                    
                if (currop == "*") {
                    numstack = [numstack[0] * numstack[1]];
                }
                else if (currop == "+") {
                    numstack = [numstack[0] + numstack[1]];
                }
                 else if (currop == "/") {
                    numstack = [numstack[0] / numstack[1]];
                }
                 else if (currop == "-") {
                    numstack = [numstack[0] - numstack[1]];
                }
                currop = v;
            }

            }
        });
         $("#output").val(numstack[0]);
        stack = [];
    }
    else{
       $("#output").val(stack.join(""));
    }
    
}

$(function() {
    $("button").click(function() {
        switch ($(this).text()) {
        case "+":
        case "-":
        case "*":
        case "/":
        case "=":
            stack.push($(this).text());
            break;
        default:
            stack.push(parseInt($(this).text(), 10))
            break;
        }
        updateOutput();
    });
});