jQuery counter

example.html

<div class="js-google-description">
  <label>Meta_description</label>
  <span class="badge"></span>
  <textarea name="meta_description"></textarea>
</div>

example.js

$('.js-google-description').counter({
  countClass: 'badge',
  threshold: 160,
  thresholdClass: 'warning'
});

jquery.counter.js

// the semi-colon before function invocation is a safety net against concatenated 
// scripts and/or other plugins which may not be closed properly.
;(function ( $, window, undefined ) {

  // undefined is used here as the undefined global variable in ECMAScript 3 is
  // mutable (ie. it can be changed by someone else). undefined isn't really being
  // passed in so we can ensure the value of it is truly undefined. In ES5, undefined
  // can no longer be modified.

  // window and document are passed through as local variables rather than globals
  // as this (slightly) quickens the resolution process and can be more efficiently
  // minified (especially when both are regularly referenced in your plugin).

  // Create the defaults once
  var pluginName = 'counter',
      document = window.document,
      defaults = {
              countClass: "count",
      	threshold: 0,
      	thresholdClass: "warning"
      };

  // The actual plugin constructor
  function Plugin( element, options ) {
    this.element = element;

    // jQuery has an extend method which merges the contents of two or 
    // more objects, storing the result in the first object. The first object
    // is generally empty as we don't want to alter the default options for
    // future instances of the plugin
    this.options = $.extend( {}, defaults, options) ;

    this._defaults = defaults;
    this._name = pluginName;

    this.init();
  }

  Plugin.prototype.count = function(counterObj, showCountObj)
  {
    var length = counterObj.val().length;

  	showCountObj.html(length);

  	if (this.options.threshold > 0)
  	{
  		if (length > this.options.threshold)
  		{
  			showCountObj.addClass(this.options.thresholdClass);
  		}
  		else
  		{
  			showCountObj.removeClass(this.options.thresholdClass);
  		}
  	}
  };

  Plugin.prototype.init = function () {
    // Place initialization logic here
    // You already have access to the DOM element and the options via the instance, 
    // e.g., this.element and this.options

    var counterObj = $(this.element).find("input, textarea").first();
    var showCountObj = $(this.element).find("." + this.options.countClass);

   	var plugin = this;

    plugin.count(counterObj, showCountObj);

    $(counterObj).on("keyup", function()
    {
      plugin.count(counterObj, showCountObj);
    });
  };

  // A really lightweight plugin wrapper around the constructor, 
  // preventing against multiple instantiations
  $.fn[pluginName] = function ( options ) {
    return this.each(function () {
      if (!$.data(this, 'plugin_' + pluginName)) {
        $.data(this, 'plugin_' + pluginName, new Plugin( this, options ));
      }
    });
  }

}(jQuery, window));