freeCodeCamp/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.english.md

id	title	challengeType
bad87fee1348bd9aec908852	Create a Class to Target with jQuery Selectors	0

Description

Not every class needs to have corresponding CSS. Sometimes we create classes just for the purpose of selecting these elements more easily using jQuery. Give each of your button elements the class target.

Instructions

Tests

tests:
  - text: Apply the <code>target</code> class to each of your <code>button</code> elements.
    testString: assert($(".target").length > 5, 'Apply the <code>target</code> class to each of your <code>button</code> elements.');

Challenge Seed

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <div class="well">
        <button class="btn btn-default"></button>
        <button class="btn btn-default"></button>
        <button class="btn btn-default"></button>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="well">
        <button class="btn btn-default"></button>
        <button class="btn btn-default"></button>
        <button class="btn btn-default"></button>
      </div>
    </div>
  </div>
</div>

Solution

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <div class="well">
        <button class="target btn btn-default"></button>
        <button class="target btn btn-default"></button>
        <button class="target btn btn-default"></button>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="well">
        <button class="target btn btn-default"></button>
        <button class="target btn btn-default"></button>
        <button class="target btn btn-default"></button>
      </div>
    </div>
  </div>
</div>