freeCodeCamp/create-a-class-to-target-with-jquery-selectors.english.md at 301d03df7b91d4f9c72b7e49b188d2516f4a81af

Files

Randell Dawson 3ec1fe8ea7 feat: add forumTopicId to challenge frontmatter [pre-existing]

This commit adds the pre-existing challenge guide topics in the
forum to the forntmatter of their challenge markdown files.

2019-08-05 22:14:37 +05:30

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: 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