jQuery - Change the CSS of an Element Using jQuery

Are we going to be able to completely replace css.stylesheet with jQuery and bootstrap? Cause these are way easier to understand than doing it the stylesheet way. Or is there still stuff on stylesheet we cant do on these
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:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36 Edg/107.0.1418.62

Challenge: jQuery - Change the CSS of an Element Using jQuery

Link to the challenge:

No, there will always be things that you have to write in CSS to create custom effects. jQuery is not really something you would use to create a new project anymore. It is only introduced here because there is a lot of legacy code out there that makes use of jQuery.

Oh, ok. Good to learn anyway i guess, thank you Randell

If you plan on doing any customization of appearance, you’ll still need CSS.

Bootstrap is one of many libraries that can give you a really good starting point with styling. jQuery has historically been very useful for DOM manipulation within JavaScript. However, most modern web programming favors libraries/frameworks like React, Vue, and Angular for DOM manipulation. There are styling and component libraries built to work well with these tools that will give you a more modern look and easier customization than Bootstrap.

Does DOM = domain? Ok i looked ahead and saw we’ll be jumping into React soon, are Vue and Angular also in the future lessons?

Easier customization than Bootstrap? Okay that should be interesting considering Bootstrap was already pretty nice

No. You will have to find other resources other than the curriculum for those.

“DOM” is the “Document Object Model”. It refers to the way that JavaScript represents the displayed components of a web page.

The freeCodeCamp curriculum doesn’t cover Angular or Vue, but I’m sure that there are freeCodeCamp News and freeCodeCamp YouTube tutorials if you’re interested in branching out.

1 Like

Sweet, thanks yall :slight_smile:

Also i do peep the YouTube from time to time, great videos very informational!