JSFiddle - React, Tailwind, and code Playground
by Sean Cannon
HTML
<div class="title">
<h1>
This is a Test Environment for JavaScript
</h1>
<h2 id="Display">
*Null*
</h2>
</div>
<div class = "body">
<div class="buttons">
<div class = "row1">
<button onclick = "calc.addNum(1)"> 1</button>
<button onclick = "calc.addNum(2)"> 2</button>
<button onclick = "calc.addNum(3)"> 3</button>
<button onclick = "calc.add()"> +</button>
</div>
<div class = "row2">
<button onclick = "calc.addNum(4)"> 4</button>
<button onclick = "calc.addNum(5)"> 5</button>
<button onclick = "calc.addNum(6)"> 6</button>
<button onclick = "calc.subtract()"> -</button>
</div>
<div class = "row3">
<button onclick = "calc.addNum(7)"> 7</button>
<button onclick = "calc.addNum(8)"> 8</button>
<button onclick = "calc.addNum(9)"> 9</button>
<button onclick = "calc.multiply()"> *</button>
</div>
<div class = "row4">
<button onclick = "calc.addNum(0)"> 0</button>
<button onclick = "calc.divide()"> /</button>
<button onclick = "calc.calculate()"> =</button>
</div>
</div>
</div>
<script>
var calc = {
first : undefined,
operator : null,
second : undefined,
result : undefined
Displayer : document.getElementById("display")
};
calc.addNum = function(number)
{
alert(number);
if(operator == null)
{
this.first = this.first.concat(number);
}
else
{
this.second =...