freeCodeCamp/use-comments-to-clarify-code.english.md at ddabb9ef0f103aa51aaf1b4657a60b574257c3e5

Files

Valeriy 79d9012432 fix(curriculum): quotes in tests (#18828 )

* fix(curriculum): tests quotes

* fix(curriculum): fill seed-teardown

* fix(curriculum): fix tests and remove unneeded seed-teardown

2018-10-20 23:32:47 +05:30

2.5 KiB

Raw Blame History

id, title, challengeType

id	title	challengeType
bad87fee1348bd9aec908857	Use Comments to Clarify Code	0

Description

When we start using jQuery, we will modify HTML elements without needing to actually change them in HTML. Let's make sure that everyone knows they shouldn't actually modify any of this code directly. Remember that you can start a comment with  Add a comment at the top of your HTML that says Only change code above this line.

Instructions

Tests

tests:
  - text: Start a comment with <code>&#60;!--</code> at the top of your HTML.
    testString: assert(code.match(/^\s*<!--/), 'Start a comment with <code>&#60;!--</code> at the top of your HTML.');
  - text: Your comment should have the text <code>Only change code above this line</code>.
    testString: assert(code.match(/<!--(?!(>|->|.*-->.*this line))\s*.*this line.*\s*-->/gi), 'Your comment should have the text <code>Only change code above this line</code>.');
  - text: Be sure to close your comment with <code>--&#62;</code>.
    testString: assert(code.match(/-->.*\n+.+/g), 'Be sure to close your comment with <code>--&#62;</code>.');
  - text: You should have the same number of comment openers and closers.
    testString: assert(code.match(/<!--/g).length === code.match(/-->/g).length, 'You should have the same number of comment openers and closers.');

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">#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>

Solution

// solution required

2.5 KiB Raw Blame History