Edit on
<div class="container">
  <textarea class="msg" rows="5" cols="35"></textarea>
  <p class="char-left"></p>
</div>
body, textarea {
    font-family: Roboto, sans-serif;
}
.container {
  	width: 300px;
}
.msg, .char-left {
    font-size: 12pt;
}
.msg {
	padding: 8px;
	width: 284px;
}
.char-left {
  	text-align: right;
}
.warning {
    color: #c00;
}
(function(){
  var msg = document.getElementsByClassName("msg")[0],
      charLeftLabel = "char-left",
      charLeft = document.getElementsByClassName(charLeftLabel)[0],
      maxChar = 140,
      maxCharWarn = 20;
  
  	  // show characters left at start
  	  charLeft.innerHTML = maxChar;

  	  // update while typing
  	  msg.onkeydown = function(){
        setTimeout(function(){
          charLeft.innerHTML = maxChar - msg.value.length;

          // whether or not to display warning class based on characters left
          var warnLabel = msg.value.length >= maxChar - maxCharWarn ? " warning" : "";
          charLeft.className = charLeftLabel + warnLabel;
        }, 1); 
      };
})();
Rerun