JSFiddle - React, Tailwind, and code Playground

by Felipe Kautzmann

HTML

<script src="http://knockoutjs.com/js/knockout-2.1.0.js"></script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<h1>Mensagem</h1>
<textarea id="txtMsg" cols='50'  rows='3'  data-bind='value: message, valueUpdate:"afterkeydown"'></textarea>
<div class="remaining" data-bind='text: remaining'></div>
<br/>
<button data-bind='enable: couldSend, click: show'>Send</button>
<button data-bind='enable: couldClear, click: doClear'>Clear</button>

CSS

* {
  font-family:Calibri;  
  margin: 5px
}

textarea {
    border: 1px solid rgba(200, 200, 200, 1);
    border-radius: 5px;
    padding: 4px;
}

.remaining {
    position: absolute;
    top: 15%;
    left: 57%;
    opacity: .3;
    font-weight: bold;
}

JavaScript

var ViewModel = function (message) {

    this.message = ko.observable(message);
    
    this.message.subscribe(function(newValue){
        if(!this.couldSend()){
            this.message(newValue.substr(0,140));
        }
    }, this);
    
    this.remaining = ko.computed(function () {
        return 140 - this.message().length;
    }, this);
    
    this.couldSend = ko.computed(function () {
        return this.message().length > 0 && this.message().length < 140;
    }, this);
    
    this.couldClear = ko.computed(function(){
        return this.message().length > 0;
    }, this);
    
    this.doClear = function(){
        if(this.message().length > 0){      
            ko.applyBindings(new ViewModel(""));
        }
    };
    
    this.show = function () {
        alert(this.message());
    };    
};

ko.applyBindings(new ViewModel(""));