JSFiddle - React, Tailwind, and code Playground

by ipeshev

HTML

<div id="view">
<div >
    <div data-bind="text:'step:'+h+' lambda:'+l"></div>
    <table >
        
        
        <tr>
            <!--ko foreach:points -->
                
                <td data-bind="text:$data.x ?  $data.x.toFixed($root.accuracy) : 0"></td>
            <td data-bind="text:$data.y ?  $data.y.toFixed($root.accuracy) : 0"></td>
            <td data-bind="text:$data.yReal ?  $data.yReal.toFixed($root.accuracy) : 0"></td>
                
            
            <!-- /ko-->
            
        </tr>
        
    </table>
    <div class="divider"></div>
</div>
</div>

JavaScript

function ViewController(){
    var self = this,
        h = 1/4,
    	l = -10,
        x = 0,
        X = 1,
    	steps = Math.ceil((X - x ) / h),
        i,
        accuracy = 4;
    self.h = h;
    self.l = l;
    self.points = ko.observableArray();
    function calcStep(yPrev){
    	return (h*l + 1)*yPrev;
    }
    function calcRealStep(xCurr){
        return x*Math.pow(Math.E,(l*(xCurr-x)));
    }
    var yprev = 1;
    var yCurr;
    for(i=0;i<steps+1;i++ ){
        yCurr = calcStep(yprev); 
        self.points.push({
        	x: x+i*h,
            y: yCurr,
            yReal : calcRealStep(x+i*h)
        }
        yprev = yCurr;
    }
                         
    ko.applyBindings(self,document.getElementById("view"));
}          
new ViewController();