Negative Character Counter


#1

Hi all,

Not sure if this has been posted before or if it's outside the scope of this lesson. Just something I noticed while going through the lesson and wanted to see if I could fix it...

The character counter goes negative once you have too more than 140 characters. Now, I can see why this may be important as a user would like to know how many characters they must delete. However, I have never seen it implemented this way. Most of the time the site will either display "0" or "xxx/140" where "xxx" (like a text message) are the total amount of characters. This is a simple addition in the code.

To display '0' simply add 1 line of code in the 'if' statement:
if(charactersLeft < 0) {
$('.btn').addClass('disabled');
$('.counter').text('0');
}

To display 'xxx/140', remove the added code from above and replace it with:
if(charactersLeft < 0) {
$('.btn').addClass('disabled');
$('.counter').text(postLength).append('/140');
}
Now, I will add that in this method, the character counter should be counting UP, not DOWN. This is a simply change in the event handler where you use "keyup" and changing the .counter from "charactersLeft" to "postLength".

This is how I solved this problem, I'm sure there are many other ways to do so.

Thanks!


#2

Hey Edwin ,

Thanks for sharing this! It's always great seeing what people do to improve the thing they built when they get to the end of the lesson, & I like that you made it be more like the real-world methods you've seen used :slightly_smiling:

I think the goal of the lesson was to imitate Twitter, which does go into negative characters.