freeCodeCamp/create-a-class-to-target-with-jquery-selectors.english.md at 078b06e4627fa6c628d12c7ca6fae9af82ef4528

Files

Oliver Eyton-Williams bd68b70f3d Feat: hide blocks not challenges (#39504 )

* fix: remove isHidden flag from frontmatter

* fix: add isUpcomingChange

Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>

* feat: hide blocks not challenges

Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>

Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>

2020-09-03 15:07:40 -07:00

2.0 KiB

Raw Blame History

id, title, challengeType, forumTopicId

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

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: You should apply the <code>target</code> class to each of your <code>button</code> elements.
    testString: assert($(".target").length > 5);

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>

2.0 KiB Raw Blame History