freeCodeCamp

3.9 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
bad87fee1348bd9aedf08835	Create a Set of Checkboxes	0		قم بإنشاء مجموعة من مربعات الاختيار

Description

تستخدم النماذج عادة checkboxes للأسئلة التي قد تحتوي على أكثر من إجابة واحدة. مربعات الاختيار هي نوع من input يمكن دمج كل مربعات الاختيار داخل عنصر label الخاص بها. من خلال لف عنصر input داخل عنصر label ، سيقوم تلقائيًا بربط إدخال مربع الاختيار مع عنصر التسمية المحيط به. يجب أن تحتوي جميع مدخلات خانة الاختيار ذات الصلة على سمة name نفسه. فهو يعتبر أفضل الممارسات لتحديد بشكل واضح على العلاقة بين مربع input والمناظرة label عن طريق تعيين for سمة على label عنصر لتتناسب مع id سمة من يرتبط input عنصر. في ما يلي مثال على مربع اختيار: <label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>

Instructions

أضف إلى مجموعتك مجموعة من ثلاثة مربعات اختيار. يجب أن يكون كل مربع متداخل داخل عنصر label الخاص به. يجب على جميع الثلاثة تقاسم سمة name personality .

Tests

tests:
  - text: يجب أن تحتوي صفحتك على ثلاثة عناصر من خانة الاختيار.
    testString: 'assert($("input[type="checkbox"]").length > 2, "Your page should have three checkbox elements.");'
  - text: يجب أن يكون كل عنصر من عناصر خانة الاختيار الثلاثة متداخلاً في عنصر <code>label</code> الخاص به.
    testString: 'assert($("label > input[type="checkbox"]:only-child").length > 2, "Each of your three checkbox elements should be nested in its own <code>label</code> element.");'
  - text: تأكد من أن كل عنصر من عناصر <code>label</code> لديه علامة إغلاق.
    testString: 'assert(code.match(/<\/label>/g) && code.match(/<label/g) && code.match(/<\/label>/g).length === code.match(/<label/g).length, "Make sure each of your <code>label</code> elements has a closing tag.");'
  - text: إعطاء مربعات الاختيار الخاصة بك سمة <code>name</code> <code>personality</code> .
    testString: 'assert($("label > input[type="checkbox"]").filter("[name="personality"]").length > 2, "Give your checkboxes the <code>name</code> attribute of <code>personality</code>.");'

Challenge Seed

<h2>CatPhotoApp</h2>
<main>
  <p>Click here to view more <a href="#">cat photos</a>.</p>

  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="/submit-cat-photo">
    <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
    <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</main>

Solution

// solution required

3.9 KiB Raw Blame History