freeCodeCamp: Waypoint: Target the same element with multiple jQuery Selectors BUG

Challenge Waypoint: Target the same element with multiple jQuery Selectors has an issue. User Agent is: Mozilla/5.0 (Windows NT 6.1; rv:39.0) Gecko/20100101 Firefox/39.0. Please describe how to reproduce this issue, and include links to screenshots if possible.

My code:

<script>
  $(document).ready(function() {
    $("button").addClass("animated shake");
    $(".btn").addClass("animated shake");
    $("#target1").addClass("animated shake btn-primary");


  });
</script>

<!-- You shouldn't need to modify code below 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 #target1 element should have the classes animated‚ shake and btn-primary. The error is marked down that my code doesn’t have the right classes. Wich is in this case they are right. I asked on Gitter and I need to do all of them instead of only #target1. Just let you guys know this 😉

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 34 (5 by maintainers)

Most upvoted comments

The correct answer is actually something like

$(document).ready(function() {
    $("button").addClass("animated");
    $(".btn").addClass("shake");
    $("#target1").addClass("btn-primary");


  });

The goal of the lesson is to show a student how all the specified selectors will have an effect on #target1 even if only one of them is looking for it specifically. Looking at the tests for this challenge again I notice that the tests are actually too permissive. The test Only add one class with each of your three selectors. will pass as long as you call addClass three times, even if each call is adding more than one class.

I’m reopening this bug if someone wants to fix that test and potentially reword the instructions, since I do feel like the explanation of what is expected of the student is not entirely clear.

Thanks again for your report!

+17

ltegman on Oct 15, 2015

First of all read Question carefully. Question “Only add one class with each of your three selectors.” mean’n-> firstly add individually addClass to your each three selector ( like button, .btn, and btn-primary ) after that add one more addClass for “#target” and in the addClass add your all three selector in the sequence as question want EX- code is… or like this removed solution by mod

wiki7 on Jan 29, 2017

removed solution by mod

This is the correct answer. Works for me. Thanks @ltegman

ghost on Jan 29, 2017

@bradcodd Your code does not work because you have called AddClass instead of addClass. @mh95278 Your code does not work because you have called addCLass instead of addClass.

ltegman on Nov 1, 2015

Thanks ! works for me as well

AtlasFinds on Mar 27, 2016