Question: How does Stackoverflow do the character counter saying xyz characters left?

![enter image description here](https://i.stack.imgur.com/fZD01.png)

Answer: 
Probably something like (with jQuery):

```
$('#txtbox').keypress(function() {
    var max = 500;
    var textLen = $(this).val().length;
    var textLeft = max - textLen;
    $('#charCount').text(
        textLeft + ' character' + (textLeft == 1 ? '' : 's') + ' left'
    );
});

```

(I know it's lazy to not actually look and see how they do it, but here's a working example: <http://jsfiddle.net/FishBasketGordo/hqex8/>)
Here is the definition of StackExchange's charCounter() method. It's a little obfuscated, but you can find the logic if you dig through it:

```
charCounter: function(c) {
    return this.each(function() {
        var d = $(this).parents("form").find("span.text-counter");
        var e = this;
        var f = function() {
            var j = c.min;
            var l = c.max;
            var k = c.setIsValid || function() {};
            var h = e.value ? e.value.length : 0;
            var i = h > l * .8 ? "supernova" : h > l * .6 ? "hot" : h > l * .4 ? "warm" : "cool";
            var g = "";
            if (h == 0) {
                g = "enter at least " + j + " characters";
                k(false);
            } else {
                if (h < j) {
                    g = j - h + " more to go..";
                    k(false);
                } else {
                    g = l - h + " character" + (l - h != 1 ? "s" : "") + " left";
                    k(h <= l);
                }
            }
            d.text(g);
            if (!d.hasClass(i)) {
                d.removeClass("supernova hot warm cool").addClass(i);
            }
        };
        $(this).bind("blur focus keyup", a.DelayedReaction(f, 100, {
            sliding: true
        }).trigger);
    });
}

```

And the comment text areas, for example, are set up like so (again, obfuscated):

```
var x = z.find("textarea");
x.charCounter({
    min: 15,
    max: 600,
    setIsValid: A
});

```