JSFiddle - React, Tailwind, and code Playground

by mowglisanu

HTML

<form id="form" method="post" action="">  

        <div>
        	<label for="message">Enter text here:</label>
        	<textarea id="message1" name="message1" autpfocus></textarea>
        </div>
   

    </form>

CSS

body {
	margin:0;
	padding:20px 40px;
	background:#fff;
	font:80% Arial, Helvetica, sans-serif;
	color:#555;
	line-height:180%;
}
h1{
	font-size:180%;
	font-weight:normal;
	}
h2{
	font-size:160%;
	font-weight:normal;
	}	
h3{
	font-size:140%;
	font-weight:normal;
	}	
pre{
	display:block;
	font:12px "Courier New", Courier, monospace;
	padding:10px;
	border:1px solid #bae2f0;
	background:#e3f4f9;	
	margin:.5em 0;
	width:500px;
	}		
.clear{
	clear:both;
	}	
img{border:none;}
	
/* Character Count styles */	

form{width:500px;}
label{
	display:block;
	font-size:14px;
	}
textarea{
	width:490px;
	height:60px;
	border:2px solid #ccc;
	padding:3px;
	color:#555;
	font:16px Arial, Helvetica, sans-serif;
	}
form div{position:relative;margin:1em 0;}
form .counter{
	position:absolute;
	right:0;
	top:0;
	font-size:20px;
	font-weight:bold;
	color:#ccc;
	}
form .warning{color:#600;}	
form .exceeded{color:#e00;}

JavaScript

(function($) {

  $.fn.charCount = function(options) {

    // default configuration properties
    var defaults = {
      allowed: 140,
      warning: 25,
      css: 'counter',
      counterElement: 'span',
      cssWarning: 'warning',
      cssExceeded: 'exceeded',
      counterText: ''
    };

    var options = $.extend(defaults, options);

    function calculate(obj) {
      var count = $(obj).val().length;
      var available = options.allowed - count;
      if (available <= options.warning && available >= 0) {
        $(obj).next().addClass(options.cssWarning);
      } else {
        $(obj).next().removeClass(options.cssWarning);
      }
      if (available < 0) {
        $(obj).next().addClass(options.cssExceeded);
      } else {
        $(obj).next().removeClass(options.cssExceeded);
      }
      $(obj).next().html(options.counterText + available);
    };

    this.each(function() {
      $(this).after('<' + options.counterElement + ' class="' + options.css + '">' + options.counterText + '</' + options.counterElement + '>');
      calculate(this);
      $(this).keyup(function() {
        calculate(this)
      });
      $(this).change(function() {
        calculate(this)
      });
    });

  };

})(jQuery);
	$(document).ready(function(){	
		//default usage
		$("#message1").charCount();
		//custom usage
		$("#message2").charCount({
			allowed: 50,		
			warning: 20,
			counterText: 'Characters left: '	
		});
	});