JSFiddle - React, Tailwind, and code Playground

by Ben Sudbury

HTML

<script src="https://rawgit.com/Polymer/observe-js/master/src/observe.js"></script>
 
<body>
    <input type="text" id="Operand1"/> Operand 1<br/>
        <input type="text" id="Operand2"/> Operand 2<br/>
        <input type="text" id="Result" disabled/> Result<br/>    
  
</body>

JavaScript

function SumCalculator(){
    var that = this;
    this.Operand1 = 0;
    this.Operand2 = 0;
    this.Result = 0;
    this.performCalculation = function(){
        that.Result = Number(that.Operand1) + Number(that.Operand2);   
    }
    
    var observer = new CompoundObserver();
    observer.addPath(this, 'Operand1');
    observer.addPath(this, 'Operand2');
    observer.open(this.performCalculation);
}


//Controller

var newCalculator = new SumCalculator();
function setResult(){
   
    document.getElementById("Result").value = newCalculator.Result;
}
setResult();

var observer = new PathObserver(newCalculator, 'Result');
observer.open(setResult);

var inputOperand1 = document.getElementById("Operand1");
inputOperand1.value = newCalculator.Operand1;
inputOperand1.addEventListener("keyup", function(){
    newCalculator.Operand1 = inputOperand1.value;
})

var inputOperand2 = document.getElementById("Operand2");
inputOperand2.value = newCalculator.Operand2;
inputOperand2.addEventListener("keyup", function(){
    newCalculator.Operand2 = inputOperand2.value;
})