JSFiddle - React, Tailwind, and code Playground

by RajamohanShilpa A

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
<div>
  <div>  
    <label data-bind="text: firstName"></label>
    <label data-bind="text: lastName"></label>
  </div>
  <div>
    First Name <input data-bind="value: firstName" />
  </div>
  <div>
    Last Name <input data-bind="value: lastName" />
  </div>
  <div>
    Full Name <label data-bind="text: fullName"></label>    
  </div>
  <div>
    <button data-bind="click: upperCase">Click to UpperCase</button>
  </div>
</div>

JavaScript

$(function() { 
  function viewModel(){
    this.firstName = ko.observable('');
    this.lastName = ko.observable('');
    this.fullName = ko.computed(function() {
      return this.firstName() + ' ' + this.lastName();
    }, this);
    
    this.upperCase = function () {
    	var currentVal = this.lastName();
      this.lastName(currentVal.toUpperCase());
    };
  }

  ko.applyBindings(new viewModel());
});