JSFiddle - React, Tailwind, and code Playground

by guyluchenbill

HTML

<div id='output'></div>    
<input type='text' id='input' disabled /><br /> 
<input type='button' id='_1' value='1' class='one' /> 
<input type='button' id='_2' value='2' class='one' /> 
<input type='button' id='_3' value='3' class='two' />
<input type='button' id='add' value='+' class='two' /> <br />
<input type='button' id='_4' value='4' /> 
<input type='button' id='_5' value='5' /> 
<input type='button' id='_6' value='6' />
<input type='button' id='subtract' value='-' class='two' /> <br />
<input type='button' id='_7' value='7' /> 
<input type='button' id='_8' value='8' /> 
<input type='button' id='_9' value='9' />
<input type='button' id='multiply' value='*' class='two' /> <br />
<input type='button' id='_0' value='0' /> 
<input type='button' id='divide' value='/' class='two' /> 
<input type='button' id='clear' value='C' class='two' />

CSS

input { 
  padding: 10px;    
}
#input { 
  text-align: right; 
  margin-bottom: 5px; 
}

JavaScript

////////////////////////////////////////////////////////////////////////
////////////////////////////calc////////////////////////////////////////
////////////////////////////////////////////////////////////////////////
var $ = function(id) { 
    return document.getElementById(id);  
}; 
var buttons = ['_1','_2','_3','_4','_5','_6','_7','_8','_9','_0']; 
var ops = ['clear','add','subtract', 'multiply', 'divide']; 

for (var i=0, c=ops.length;i<c;i++) { 
    $(ops[i]).addEventListener('click', update, false); 
}
for (var i=0, c=buttons.length;i<c;i++) { 
    $(buttons[i]).addEventListener('click', update, false); 
}
    
function update() { 
    if (this.value === '+') { 
        this.op = 'add'; 
        
        if (this.op === 'add') { 
            console.log(x.sum()); 
        }
        
    } 
}
    
var Calc = function(a,b) { 
    this.a = a; 
    this.b = b; 
}; 
Calc.prototype = {
    constructor: Calc, 
    sum: function() { 
        return this.a + this.b; 
    }, 
    subtract: function() { 
        return this.a - this.b;    
    }
}; 

var x = new Calc(1,2);