JSFiddle - React, Tailwind, and code Playground

by de Montalembert Jonathan

HTML

<input type="text" data-bind='value:username'>
  <div data-bind='text:username'></div>
  Your password is <span data-bind='text:password'>
  
  </span>
  <button data-bind='click:cap'>hello</button>

JavaScript

function User(options){
  var self = this;
  
  self.username = ko.observable(options.username);
  self.password = ko.computed(function(){
    return +new Date() + self.username().slice(0,4);
  }, this);
  var isCap = false;
  this.cap = function(){
    if(!isCap){
      isCap = !isCap;
      this.username(this.username().toUpperCase());
    }
    else{
      isCap = !isCap;
      this.username(this.username().toLowerCase());
    }
  }; 
}

ko.applyBindings(new User({username:'jon'}));