freeCodeCamp/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/use-comments-to-clarify-code.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
bad87fee1348bd9aec908857	استخدام Comments لتوضيح Code	0	18347	use-comments-to-clarify-code

--description--

عندما نبدأ باستخدام jQuery، تعدل عناصر HTML دون الحاجة إلى تغييرها فعليا في HTML.

تيقن من أن الجميع يعلم أنه لا ينبغي لهم في الواقع تعديل أي من هذه التعليمات البرمجية قاصدًا.

تذكر أنه يمكنك بَدْء تعليق مع <!-- وإنهاء تعليق مع -->

إضافة تعليق في الجزء العلوي من HTML الخاص بك يقول Code below this line should not be changed

--hints--

يجب عليك بَدْء تعليق مع <!-- في الجزء العلوي من HTML.

assert(code.match(/^\s*<!--/));

يجب أن يحتوي تعليقك على نص Code below this line should not be changed.

assert(code.match(/<!--(?!(>|->|.*-->.*this line))\s*.*this line.*\s*-->/gi));

يجب عليك إغلاق تعليقك مع -->.

assert(code.match(/-->.*\n+.+/g));

يجب أن يكون لديك نفس العدد من علامات فتح التعليقات وعلامات غلقهم.

assert(code.match(/<!--/g).length === code.match(/-->/g).length);

--seed--

--seed-contents--

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

--solutions--

<!-- Code below this line should not be changed -->
<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>