JSFiddle - React, Tailwind, and code Playground

by bigwelly

HTML

<div ng-app ng-controller="Ctrl">
    <div class="calcbody">
        <div class="thinborder">
            <p class="output" name="output">{{output}}
                <br>{{operationToken}}</p>
        </div>
        <div class="calcbuttons">
            <button name="btn1" class="numberbutton" value="1" ng-click='updateOutput(1)'>1</button>
            <button name="btn2" class="numberbutton" value="2" ng-click='updateOutput(2)'>2</button>
            <button name="btn3" class="numberbutton" value="3" ng-click='updateOutput(3)'>3</button>
            <button name="btnMinus" class="operationbutton" ng-click='subtract()'>-</button>
            <br>
            <button name="btn4" class="numberbutton" value="4" ng-click='updateOutput(4)'>4</button>
            <button name="btn5" class="numberbutton" value="5" ng-click='updateOutput(5)'>5</button>
            <button name="btn6" class="numberbutton" value="6" ng-click='updateOutput(6)'>6</button>
            <button name="btnPlus" class="operationbutton" ng-click='add()'>+</button>
            <br>
            <button name="btn7" class="numberbutton" value="7" ng-click='updateOutput(7)'>7</button>
            <button name="btn8" class="numberbutton" value="8" ng-click='updateOutput(8)'>8</button>
            <button name="btn9" class="numberbutton" value="9" ng-click='updateOutput(9)'>9</button>
            <button name="btnEquals" class="operationbutton" ng-click='calculate()'>=</button>
            <br>
            <button name="btn0" class="numberbutton" value="0" ng-click='updateOutput(0)'>0</button>
            <button name="btnClear" class="clearbutton" ng-click='clear()'>CLEAR</button>
        </div>
    </div>
    <p>pendingOperation: {{pendingOperation}}
        <br>lastOperation: {{lastOperation}}
        <br>runningTotal: {{runningTotal}}
        <br>pendingValue: {{pendingValue}}
        <br>newNumber: {{newNumber}}</p>
    <script...

CSS

p {
     font-size:12px;
 }
 .thinborder {
     border:1px solid #ccc;
     width:206px;
     height:60px;
     background:black;
 }
 .calcbuttons {
     padding:10px;
 }
 .numberbutton {
     width:35px;
 }
 .operationbutton {
     width:35px;
 }
 .clearbutton {
     width:100px;
     background-color:green;
     color:white;
 }
 .output {
     background:black;
     color:lime;
     font-family:"Courier New", Courier;
     padding:0 10px;
     text-align:right;
     font-size:14px;
 }
 .calcbody {
     background:#306;
     width:210px;
     padding:10px;
     box-shadow: 5px 5px 5px #888888;
     border-radius:12px;
 }

JavaScript

function Ctrl($scope) {
    $scope.output = "0";
    $scope.newNumber = true;
    $scope.pendingOperation = null;
    $scope.operationToken = "";
    $scope.runningTotal = null;
    $scope.pendingValue = null;
    $scope.lastOperation = null;

    var ADD = "adding";
    var SUBTRACT = "subtracting";
    var ADD_TOKEN = "+";
    var SUBTRACT_TOKEN = "-";

    $scope.updateOutput = function (btn) {
        if ($scope.output == "0" || $scope.newNumber) {
            $scope.output = btn;
            $scope.newNumber = false;
        } else {
            $scope.output += String(btn);
        }
        $scope.pendingValue = toNumber($scope.output);
    };

    $scope.add = function () {
        if ($scope.pendingValue) {
            if ($scope.runningTotal && $scope.pendingOperation == ADD) {
                $scope.runningTotal += $scope.pendingValue;
            } else if ($scope.runningTotal && $scope.pendingOperation == SUBTRACT) {
                $scope.runningTotal -= $scope.pendingValue;
            } else {
                $scope.runningTotal = $scope.pendingValue;
            }
        }
        setOperationToken(ADD);
        setOutput(String($scope.runningTotal));
        $scope.pendingOperation = ADD;
        $scope.newNumber = true;
        $scope.pendingValue = null;
    };

    $scope.subtract = function () {
        if ($scope.pendingValue) {
            if ($scope.runningTotal && ($scope.pendingOperation == SUBTRACT)) {
                $scope.runningTotal -= $scope.pendingValue;
            } else if ($scope.runningTotal && $scope.pendingOperation == ADD) {
                $scope.runningTotal += $scope.pendingValue;
            } else {
                $scope.runningTotal = $scope.pendingValue;
            }
        }
        setOperationToken(SUBTRACT);
        setOutput(String($scope.runningTotal));
        $scope.pendingOperation = SUBTRACT;
        $scope.newNumber = true;
        $scope.pendingValue = null;
    };

    $scope.calculate = function...