JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<tr><td colspan="4"><input id="output" type="text" value="0"/></td></tr>
<tr>
<td><button>1</button></td><td><button>2</button></td><td><button>3</button></td><td><button>+</button></td>
</tr>
<tr>
<td><button>4</button></td><td><button>5</button></td><td><button>6</button></td><td><button>-</button></td>
</tr>
<tr>
<td><button>7</button></td><td><button>8</button></td><td><button>9</button></td><td><button>C</button></td>
</tr>
<tr>
<td></td><td><button>0</button></td><td></td><td><button>=</button></td>
</tr>
</div>
CSS
table {
background: #AAA;
}
td {
text-align: center;
}
input {
margin: 5px 3px;
}
button {
font-weight: bold;
width: 30px;
height: 30px;
margin: 3px;
}
JavaScript
var add = function(a, b) {
return a + b;
}
var subtract = function(a, b) {
return a - b;
}
var result = 0;
var current = 0;
var operator = add;
var firstCheck = true;
$('button').click(function(e) {
var value = e.target.innerHTML;
var output = document.getElementById('output');
switch(value) {
case 'C':
firstCheck = true;
result = 0;
current = 0;
operator = add;
output.value = result;
break;
case '=':
firstCheck = true;
result = operator(result, current);
current = 0;
operator = add;
output.value = result;
break;
case '+':
firstCheck = false;
result = operator(result, current);
current = 0;
operator = add;
output.value = result;
break;
case '-':
firstCheck = false;
result = operator(result, current);
current = 0;
operator = subtract;
output.value = result;
break;
default:
if (firstCheck) result = 0;
var digit = parseInt(value);
current = current * 10 + digit;
output.value = current;
}
});