JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<!-- This is a *view* - HTML markup that defines the appearance of your UI -->
<button data-bind="click: toggleForm ">Hide Form</button>
<div id="xxx">
<br/>
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>

<p>First name: <input data-bind="value: firstName, valueUpdate: 'afterkeydown'" /></p>
<p>Last name: <input data-bind="value: lastName, valueUpdate: 'afterkeydown'" /></p>

<p>Full name: <strong data-bind="text: fullName"></strong></p>

<button data-bind="click: capitalizeLastName">Go caps</button>
<button data-bind="click: clearForm ">Clear Form</button>
<br/>
<label data-bind="text: avi"></label>
<textarea data-bind="value: avi, valueUpdate: 'afterkeydown'"></textarea>
</div>

CSS

#xxx {border:solid 1px red;width:250px;}

JavaScript

function frm(firstName, lastName) {
    var self = this;
    self.firstName = name;
    self.lastName = lastName;
}

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI

function AppViewModel(obj) {

    this.firstName = ko.observable(obj.firstName);
    this.lastName = ko.observable(obj.lastName);
    this.avi = ko.observable("Hello");

    this.fullName = ko.computed(function() {
        return this.firstName() + " " + this.lastName();
    }, this);

    this.capitalizeLastName = function() {
        var currentVal = this.lastName(); // Read the current value
        this.lastName(currentVal.toUpperCase()); // Write back a modified value
    };
    this.clearForm = function() {
        this.firstName("");
        this.lastName("");
        this.avi("");
    }
    this.toggleForm = function() {
        $("#xxx").toggle("fast");
    }
    this.duplicate = function(this) {
        
    }

}

// Activates knockout.js
ko.applyBindings(new AppViewModel({
    "firstName": "Avi",
    "lastName": "Algaly"
}));