Make a Reverse Character Counter like on Twitter

January 13, 2014 3:20pm

You know how on Twitter there’s a countdown from 140 to 0 that happens as you type? See the screenshot here if you don’t know what I’m talking about, but essentially it allows you to see how many characters you have left before hitting the maximum, which in Twitter’s case is 140.

Ever wanted to make something like that? Here’s how you can do it with jQuery:

$('textarea#tweet').keyup(function() {

    var cs = $(this).val().length;

    var cl = 140-cs;

    if (cl < 0) {
	    $('#charcount').addClass('negative-numbers');
    }
    if (cl > 0) {

	    $('#charcount').removeClass('negative-numbers');

    }

    $('#charcount').text(cl);

});

That assumes you’ve got a textarea with an ID of “tweet” and a div somewhere else on the page with an ID of “charcount”. It also adds the “negative-numbers” class, which I use to style the numbers red once they’ve reached 0 or go into negative numbers.

Up Next: Vector Version of the Feedly Logo