7/9 How (dare) "disable" as a formatting class affect the clickableness of the Post button?


#1

I am not stuck, but I don't understand why "disable" affect the behavior of the "Post" button. Here is the direct link the exercise: https://www.codecademy.com/courses/web-beginner-en-hk5qh/0/7?content_from=make-an-interactive-website%3Ajquery-dom-manipulation

I see that the disable class comes from bootstrap stylesheet, but need an explanation as to what about the class exactly is making the POST button unclickable.

var main =  function () {

    $('.btn').click(function (event){
        var post = $('.status-box').val();
        $('<li>').text(post).prependTo('.posts');
        $('.status-box').val('');
        $('.counter').text('140');
    });
    
    $('.status-box').keyup(function(){
        var postLength=$(this).val().length;
        var charactersLeft = 140 - postLength;
        $('.counter').text(charactersLeft);
        if (charactersLeft < 0) {
            $('.btn').addClass('disabled');
        } else if (charactersLeft === 140){
             $('.btn').addClass('disabled');
        } else {
             $('.btn').removeClass('disabled');
        }
    });
    
    $('.btn').addClass('disabled');
    
};

$(document).ready(main);

#2

Hi Rakhilya,

It's this line:

pointer-events: none;

:slight_smile:

It disables clicking and hover states from your pointer/cursor/mouse/whatever you want to call it, as well as keyboard focus.

In an actual app like Twitter, you'd want to have backend checks as well, since it's too easy to get around the limit we've put in place here though :slight_smile: