Disabled class? Sorry I haven't seen it


#1

I have check my style sheet several times and for the life of me I don't see a class named disable. I can clearly see style effects when the class is applied but I don't see it anywhere in my document. Check for yourself.

html,
body {
  font-family: 'Roboto', sans-serif;
  color: #404040;
  background-color: #eee;
}

.container {
  width: 520px;
  margin-top: 20px;
}

.button-group {
  margin-bottom: 20px;
}

.counter {
  display: inline;
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 10px;
}

.posts {
  clear: both;
  list-style: none;
  padding-left: 0;
  width: 100%;
}

.posts li {
  background-color: #fff;
  border: 1px solid #d8d8d8;
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  word-wrap: break-word;
  min-height: 42px;
}

#2

Can we see the HTML regarding this exercise please? disabled is an HTML attribute, and it may or may not also be related to the bootstrap framework.


#3

Here it is!!

 <!doctype html>
    <html>
      <head>
        <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
        <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
        <link href="style.css" rel="stylesheet">
      </head>
      <body>
        <div class="container">
          <form>
            <div class="form-group">
              <textarea class="form-control status-box" rows="2" placeholder="What's on your mind?"></textarea>
            </div>
          </form>
          <div class="button-group pull-right">
            <p class="counter">140</p>
            <a href="#" class="btn btn-primary">Post</a>
          </div>
        
          <ul class="posts">
          </ul>
        </div>
    
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="app.js"></script>
        
      </body>
    </html>

#4

Thank you. So which part of this is causing you to wonder what disabled is?


#5

The excersise has us add and remove the disabled class to the text entered in the status box. But like I said I don't see a class named disabled. maybe this will help you understand. Here is my .js file.

var main = function() {
    $('.btn').click(function() {
        var post = $('.status-box').val();
        $('<li>').text(post).prependTo('.posts');
        $('.status-box').val('')
        $('.counter').text(140);
        $('.btn').addClass('disabled')
        });
    $('.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');// <------ Here
            }
        else
            {$('.btn').removeClass('disabled');// <------ Here
            }
        });
        $('.btn').addClass('disabled'); // <----- and here
    };
$(document).ready(main);

#6

.disabled is a class provided by Bootstrap to change the cursor icon to a "not allowed" symbol :smile:
disabled (not dot) is an HTML attribute to "gray out" options.

Does that help? :smile:


#7

I get it but I was confused by the .add Class method.


#8

Yes, it's adding the .disabled to .btn.


#9

Nice one.

I love codeacademy, but they do sometimes leave out explanations and just tell you to carry out an action. Which isn't great when you're trying to figure out the fundamentals of a language and its structure.

Mostly awesome though x


#10

can the same be said for .dropdown-toggle? In the next exercise they have me add that class to an element on the page but it is also NOT listed on the style sheet.


#11

Yup! That's a bootstrap-provided class.


#12

I know right!! Did you know that an HTML element can have more than one class assigned to it in the opening HTML tag just by having a space? for instance

<div class="big dummy">
     What the what?!?!?
</div>

This div has 2 classes big and dummy. In the previous exercise with the status box they did this without explaining it or explaining why they did it. :rage: The status box had 2 classes .status-box and something else.


#13

Sorry it's so unclear guys. Keep in mind these courses are very old and not to say that's OK but I will definitely agree they need some tuning up.

Let it be known, though, that the CC staff and course developers/writers are working on making these courses better.


#14

I just looked up "bootstrap CSS classes on W3school's website and their is an entire section just for bootstrap classes! :dizzy_face:


#15

:smile: good intuition.

You can also look on the official bootstrap page.


#16

You guys are doing amazing work for sure.

I would never have started to learn code if it wasn't for Codecademy!

I'm just leaving feedback so future users will find it easier to learn :smile: