JSFiddle - React, Tailwind, and code Playground

by Rahul Sharma

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<div class='liveExample'>   
    a <input data-bind='value: a' />
    b <input data-bind='value: b' />
    c <input data-bind='value: c' />
    <br/>
    list <input style="width:400px" data-bind='value: list' />
    <p data-bind='html: getTable'> </p>
</div>

JavaScript

var ViewModel = function() {
    this.a = ko.observable(40000);
    this.b = ko.observable(0);
    this.c = ko.observable(1.9);
    this.list = ko.observable("2,4,8,16,32,64,125,250,500,1000,2000");
    
    this.getVal = function(x) {
        return  Math.floor( this.a()/(this.b() + this.c()*x));
    }.bind(this);
    
    this.getTable = ko.computed( function() {
        var s = this.list().split(",");
        var h = "<table>";
        for(var i=0; i<s.length; i++)
            h += "<tr><td>" + s[i] + "</td><td>" + this.getVal(s[i]) + "</td></tr>";
        return h + "</table>";
    }, this);
};
 
ko.applyBindings(new ViewModel());