JSFiddle - React, Tailwind, and code Playground

by Arif Hasan

HTML

<textarea name="message" value="" id="message"></textarea><p><span id="remaining">160 characters remaining</span> <span id="messages">1 message(s)</span>
</p>

CSS

#message {
    height: 80px;
    width: 250px;
}

JavaScript

var $remaining = $('#remaining'),
    $messages = $remaining.next();

$('#message').keyup(function(){
    var chars = this.value.length,
        messages = Math.ceil(chars / 160),
        remaining = messages * 160 - (chars % (messages * 160) || messages * 160);

    $remaining.text(remaining + ' characters remaining');
    $messages.text(messages + ' message(s)');
});