Change the CSS of an Element Using jQuery

HTML-CSS
1

Tell us what’s happening:

Just a random question, hopefully someone has the answer…
The program at the beginning asks you to create a class within the button element called “btn-default” but then later within the script asks you to “removeClass” meaning that the previous class you just created is now null. What is the purpose of this and what are some real life, on the job, instances where this is used?
Why create a class that later in script is removed?

Your code so far

<script>
  $(document).ready(function() {
    $("button").addClass("animated bounce");
    $(".well").addClass("animated shake");
    $("#target3").addClass("animated fadeOut");
    $("button").removeClass("btn-default");

  });
</script>

<!-- Only change code above this line. -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36.

Link to the challenge:
https://www.freecodecamp.org/challenges/change-the-css-of-an-element-using-jquery

2

Following the bootstrap model, if you click a checkbox that turns “Move to Trash” into “Delete Forever,” you might want to change “btn-default” into “btn-danger”, in which case you would remove “btn-default” and add “btn-danger”.

3

So bootstrap has those codes in place so that you can make modifications to codes without having to go back into your previous design and search for what you want to change?

4

I’m not sure how you got there from my answer. You asked: why would you want to remove a class via javascript that you had applied onto an element via HTML.

The addClass() and removeClass() functions are jQuery functions (that is the module from which your quoted code comes). I was using the bootstrap class called “btn-default” as an example because it was in the code.

Basically, the answer to your question (without example) is that: CSS class inheritance is a powerful tool to change the way your UI looks. Being able to remove one class of style and add another is very powerful, because it lets your UI change in response to:

  • The way your user interacts with your web application (my example)
  • A change in the data provided by some server. (The price of a stock changed, and you want to alert the user to this, so you color it green or red instead of black).
  • A change in the application state (your user switches mouse focus to another pane, so you take the coloration off a button to indicate that pressing “Enter” will no longer cause a click event).

Hope this clarifies things.

5

Yes, now I understand. Sorry, I’m new to all of this.
Thank you, great help! :slight_smile:

1 Like