JSFiddle - React, Tailwind, and code Playground
HTML
<p id="input" style="border:1px solid black" style="width:100px"><br></p>
<table>
<tr>
<td><button style="width:100%">m+</button></td>
<td><button style="width:100%">m-</button></td>
<td><button style="width:100%">mc</button></td>
<td><button style="width:100%" onclick='memory("mr")'>mr</button></td>
<td><button onclick="alert(clear === document.clear);" style="width:100%">c</button></td>
</tr>
<tr>
<td><button onclick="addChar('7')" style="width:100%">7</button></td>
<td><button onclick="addChar('8')" style="width:100%">8</button></td>
<td><button onclick="addChar('9')" style="width:100%">9</button></td>
<td><button onclick="setOperator('/')" colspan="2" style="width:200%">/</button></td>
</tr>
<tr>
<td><button onclick="addChar('4')" style="width:100%">4</button></td>
<td><button onclick="addChar('5')" style="width:100%">5</button></td>
<td><button onclick="addChar('6')" style="width:100%">6</button></td>
<td><button onclick="setOperator('*')" colspan="2" style="width:200%">*</button></td>
</tr>
<tr>
<td><button onclick="addChar('1')" style="width:100%">1</button></td>
<td><button onclick="addChar('2')" style="width:100%">2</button></td>
<td><button onclick="addChar('3')" style="width:100%">3</button></td>
<td><button onclick="setOperator('-')" colspan="2" style="width:200%">-</button></td>
</tr>
<tr>
<td><button style="width:100%">+/-</button></td>
<td><button onclick="addChar('0')" style="width:100%">0</button></td>
<td><button onclick="addChar('.')" style="width:100%">.</button></td>
<td><button onclick="calculate()" style="width:100%">=</button></td>
<td><button onclick="setOperator('+')" style="width:100%">+</button></td>
</tr>
</table>
JavaScript
var str = "";
var operand1 = 0;
var operand2 = 0;
var op = "";
var mem = 0;
var input = document.getElementById("input");
window.addChar = function(char) {
str += char;
input.innerHTML = str;
}
window.clear = function() {
str = "";
input.innerHTML = "<br>";
}
window.setOperator = function(operator) {
op = operator;
operand1 = str;
str = "";
input.innerHTML = "<br>";
}
window.calculate = function() {
operand2 = str;
if (op === "+")
{
str = ((+operand1) * 10 + (+operand2) * 10)/10;
}
else if (op === "-")
{
str = (operand1 - operand2);
}
else if (op === "*")
{
str = (operand1 * operand2);
}
else if (op === "/")
{
str = (operand1 / operand2);
}
input.innerHTML = str;
}