freeCodeCamp/add-an-accessible-date-picker.arabic.md at 64286b4f13fa6e0de3d36c53f399eee6ff6b7120

Files

Ahmad Abdolsaheb 64286b4f13 fix: add closing section tag (#38094 )

2020-01-21 16:45:31 +03:00

3.6 KiB

Raw Blame History

id, title, challengeType, videoUrl, localeTitle

id	title	challengeType	videoUrl	localeTitle
587d778b367417b2b2512aa8	Add an Accessible Date Picker	0		إضافة منتقي تاريخ يسهل الوصول إليه

Description

تشتمل النماذج غالبًا على حقل input ، والذي يمكن استخدامه لإنشاء عدة عناصر تحكم مختلفة. تشير السمة type في هذا العنصر إلى نوع الإدخال الذي سيتم إنشاؤه. ربما لاحظت text و input أنواع المدخلات في التحديات السابقة، وقدم HTML5 خيارًا لتحديد حقل date. اعتمادًا على دعم المتصفح، يظهر منتقي التاريخ في حقل input عندما يكون في التركيز، مما يجعل ملء نموذج أسهل لجميع المستخدمين. بالنسبة للمتصفحات القديمة، سيتم الكتابة افتراضيًا على text، لذلك يساعد على عرض تنسيق التاريخ المتوقع للمستخدمين في التصنيف أو كنص نائب للعنصر فقط. إليك مثال:

<label for="input1">أدخل تاريخًا:</label>
<input type="date" id="input1" name="input1">

Instructions

يقوم كامبر كات بإعداد بطولة مورتال كومبات ويريد أن يطلب من منافسيه معرفة التاريخ الأفضل. إضافة علامة input تحتوي على سمة type من "date" ، وسمة id من "pickdate" ، وسمة name من "date".

Tests

tests:
  - text: يجب أن تضيف الكود الخاص بك علامة <code>input</code> واحدة لحقل محدد التاريخ.
    testString: 'assert($("input").length == 2, "Your code should add one <code>input</code> tag for the date selector field.");'
  - text: يجب أن تحتوي علامة <code>input</code> سمة <code>type</code> بقيمة تاريخ.
    testString: 'assert($("input").attr("type") == "date", "Your <code>input</code> tag should have a <code>type</code> attribute with a value of date.");'
  - text: يجب أن تحتوي علامة <code>input</code> الخاصة بك على سمة <code>id</code> بقيمة اختيار.
    testString: 'assert($("input").attr("id") == "pickdate", "Your <code>input</code> tag should have an <code>id</code> attribute with a value of pickdate.");'
  - text: يجب أن تحتوي علامة <code>input</code> سمة <code>name</code> لها قيمة التاريخ.
    testString: 'assert($("input").attr("name") == "date", "Your <code>input</code> tag should have a <code>name</code> attribute with a value of date.");'

Challenge Seed

<body>
  <header>
    <h1>Tournaments</h1>
  </header>
  <main>
    <section>
      <h2>Mortal Kombat Tournament Survey</h2>
      <form>
        <p>Tell us the best date for the competition</p>
        <label for="pickdate">Preferred Date:</label>

        <!-- Add your code below this line -->



        <!-- Add your code above this line -->

        <input type="submit" name="submit" value="Submit">
      </form>
    </section>
  </main>
  <footer>&copy; 2018 Camper Cat</footer>
</body>

Solution

// solution required

3.6 KiB Raw Blame History