JSFiddle - React, Tailwind, and code Playground

by Diya_Khan

HTML

<div>First Name: <input data-bind="value: firstName"/></div>
<div>Last Name: <input data-bind="value: lastName"/></div>
<div>Hello, <input data-bind="value: fullName"/></div>


<div> You have clicked <span data-bind='text: clicksCount' /> times</div>
<input type="button" data-bind="click : addClicks, disable : hasClickedTooManyTimes" />
<span data-bind="visible: hasClickedTooManyTimes" />

JavaScript

var dataModel = function(first,last){
    
this.firstName = ko.observable(first);
this.lastName = ko.observable(last);
    this.fullName = ko.computed(function() {
        return this.firstName() + " " + this.lastName() 
            },this);
}
    
    ko.applyBindings(new dataModel('diya','khan'));
                                
                                
var clickedDataModel = function(){

        this.clicksCount = ko.observable(0);

        this.addClicks = function(){
             this.clicksCount (this.clicksCount () + 1); 
        }
            
        this.hasClickedTooManyTimes = ko.computed(function() {
             return this.clicksCount () >= 3;    
        },this);
        
} 

ko.applyBindings(new clickedDataModel());