freeCodeCamp/curriculum/challenges/english/03-front-end-libraries/bootstrap/label-bootstrap-buttons.english.md at 9c3de2df24bdbdb19454d56c49e660f4783d0cc9

Files

Oliver Eyton-Williams f1c9b08cf3 fix(curriculum): add isHidden: false to challenges

This includes certificates (where it does nothing), but does not
include any translations.

2020-05-25 16:25:19 +05:30

3.4 KiB

Raw Blame History

id, title, challengeType, isHidden, forumTopicId

id	title	challengeType	isHidden	forumTopicId
bad87fee1348bd9aec908856	Label Bootstrap Buttons	0	false	18222

Description

Just like we labeled our wells, we want to label our buttons. Give each of your button elements text that corresponds to its id's selector.

Instructions

Tests

tests:
  - text: Your <code>button</code> element with the id <code>target1</code> should have the text <code>#target1</code>.
    testString: assert(new RegExp("#target1","gi").test($("#target1").text()));
  - text: Your <code>button</code> element with the id <code>target2</code> should have the text <code>#target2</code>.
    testString: assert(new RegExp("#target2","gi").test($("#target2").text()));
  - text: Your <code>button</code> element with the id <code>target3</code> should have the text <code>#target3</code>.
    testString: assert(new RegExp("#target3","gi").test($("#target3").text()));
  - text: Your <code>button</code> element with the id <code>target4</code> should have the text <code>#target4</code>.
    testString: assert(new RegExp("#target4","gi").test($("#target4").text()));
  - text: Your <code>button</code> element with the id <code>target5</code> should have the text <code>#target5</code>.
    testString: assert(new RegExp("#target5","gi").test($("#target5").text()));
  - text: Your <code>button</code> element with the id <code>target6</code> should have the text <code>#target6</code>.
    testString: assert(new RegExp("#target6","gi").test($("#target6").text()));

Challenge Seed

<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"></button>
        <button class="btn btn-default target" id="target2"></button>
        <button class="btn btn-default target" id="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"></button>
        <button class="btn btn-default target" id="target5"></button>
        <button class="btn btn-default target" id="target6"></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">
      <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>

3.4 KiB Raw Blame History