JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div class="calculator">
<div id="output"> </div>
<table>
<tr>
<td>
<button id="button7" class="squareButtons">7</button>
</td>
<td>
<button id="button8" class="squareButtons">8</button>
</td>
<td>
<button id="button9" class="squareButtons">9</button>
</td>
<td>
<button id="buttonSubt" class="squareButtons">-</button>
</td>
</tr>
<tr>
<td>
<button id="button4" class="squareButtons">4</button>
</td>
<td>
<button id="button5" class="squareButtons">5</button>
</td>
<td>
<button id="button6" class="squareButtons">6</button>
</td>
<td>
<button id="buttonPlus" class="squareButtons">+</button>
</td>
</tr>
<tr>
<td>
<button id="button1" class="squareButtons">1</button>
</td>
<td>
<button id="button2" class="squareButtons">2</button>
</td>
<td>
<button id="button3" class="squareButtons">3</button>
</td>
<td>
<button id="buttonMult" class="squareButtons">x</button>
</td>
</tr>
<tr>
<td>
<button id="buttonClr" class="squareButtons">Clr</button>
</td>
<td>
<button id="button0" class="squareButtons">0</button>
</td>
<td>
<button id="buttonDiv" class="squareButtons">÷</button>
</td>
<td>
<button id="buttonEqu" class="squareButtons">=</button>
</td>
</tr>
</table>
</div>
CSS
.calculator {
position: fixed;
border: 2px solid black;
background-color: beige;
width: 220px;
height: 250px;
padding: 2px;
}
#output {
border: 2px solid black;
background-color: white;
height: 28px;
text-align: right;
}
.squareButtons {
style: none;
color: green;
border: none;
width: 50px;
height: 50px;
background-color: lightblue;
display: inline-block;
padding: 10px;
}
JavaScript
var storedNumber = document.getElementById("output").innerHTML;
var sign = 0;
var storedNumberTwo = document.getElementById("output").innerHtml;
var calc;
document.getElementById("button1").onclick = onePress;
document.getElementById("button2").onclick = twoPress;
document.getElementById("button3").onclick = threePress;
document.getElementById("button4").onclick = fourPress;
document.getElementById("button5").onclick = fivePress;
document.getElementById("button6").onclick = sixPress;
document.getElementById("button7").onclick = sevenPress;
document.getElementById("button8").onclick = eightPress;
document.getElementById("button9").onclick = ninePress;
document.getElementById("button0").onclick = zeroPress;
document.getElementById("buttonPlus").onclick = plusPress;
document.getElementById("buttonEqu").onclick = equalPress;
function onePress() {
document.getElementById("output").innerHTML += "1";
}
function twoPress() {
document.getElementById("output").innerHTML += "2";
}
function threePress() {
document.getElementById("output").innerHTML += "3";
}
function fourPress() {
document.getElementById("output").innerHTML += "4";
}
function fivePress() {
document.getElementById("output").innerHTML += "5";
}
function sixPress() {
document.getElementById("output").innerHTML += "6";
}
function sevenPress() {
document.getElementById("output").innerHTML += "7";
}
function eightPress() {
document.getElementById("output").innerHTML += "8";
}
function ninePress() {
document.getElementById("output").innerHTML += "9";
}
function zeroPress() {
document.getElementById("output").innerHTML += "0";
}
function plusPress() {
storedNumber = document.getElementById("output").innerHTML;
document.getElementById("output").innerHTML = "";
var sign = 1;
// alert(storedNumber);
}
function equalPress() {
storedNumberTwo = document.getElementById("output").innerHTML;
// if(sign === 1) {
calc = +storedNumberTwo + +storedNumber;
...