JSFiddle - React, Tailwind, and code Playground

by Randy Crews

HTML

<div id="MyCalc">
    <label>Value1</label>
    <input type="text" data-bind="value: value1"/>
    <select data-bind="options: mathOperator, selectedOptions: selectedOperator,"></select>
    <label>Value2</label>
    <input type="text" data-bind="value: value2"/>
    <div id="result">
        <span data-bind="text: calculateValues"/>
    </div>
</div>

JavaScript

var ViewModel = function() {
     var self = this;
         
    self.value1 = ko.observable(0),
    self.value2 = ko.observable(0),
    self.mathOperator = ko.observableArray(['+', '-']);
    self.selectedOperator = ko.observableArray(['+']);
    
    self.calculateValues = ko.computed(function(){
        var selectedOperator = self.selectedOperator()[0],
            value1 = self.value1(),
            value2 = self.value2();
        
        switch(selectedOperator[0]){
            case '+': 
                return parseInt(value1) + parseInt(value2);
            case '-':
                return parseInt(value1) - parseInt(value2);
        }
    });
};

ko.applyBindings(new ViewModel());