39 lines
5.9 KiB
Markdown
39 lines
5.9 KiB
Markdown
|
---
|
||
|
|
id: 587d78af367417b2b2512b03
|
||
|
|
title: Build a Survey Form
|
||
|
|
isRequired: true
|
||
|
|
challengeType: 3
|
||
|
|
videoUrl: ''
|
||
|
|
localeTitle: بناء نموذج المسح
|
||
|
|
---
|
||
|
|
|
||
|
|
## Description
|
||
|
|
<section id="description"> <strong>الهدف:</strong> إنشاء تطبيق <a href="https://codepen.io" target="_blank">CodePen.io</a> يشبه وظيفيًا هذا: <a href="https://codepen.io/freeCodeCamp/full/VPaoNP" target="_blank">https://codepen.io/freeCodeCamp/full/VPaoNP</a> . تحقق من <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">قصص المستخدمين</a> أدناه واجتاز جميع الاختبارات. اعطها اسلوبك الشخصي. يمكنك استخدام HTML و JavaScript و CSS لإكمال هذا المشروع. يوصى باستخدام CSS العادي لأن هذا هو ما غطته الدروس حتى الآن ، ويجب أن تحصل على بعض التمرين باستخدام CSS عادي. يمكنك استخدام Bootstrap أو SASS إذا اخترت. لا يوصى باستخدام هذا النوع من التقنيات الإضافية (على سبيل المثال jQuery أو React أو Angular أو Vue) ، ويكون استخدامها على مسؤوليتك الخاصة. سوف تعطيك مشاريع أخرى فرصة للعمل مع مكدسات التكنولوجيا المختلفة مثل React. سنقبل ونحاول إصلاح جميع تقارير المشكلات التي تستخدم مجموعة التكنولوجيا المقترحة لهذا المشروع. الترميز سعيدة! <strong>قصة المستخدم رقم 1:</strong> يمكنني رؤية عنوان له <code>id="title"</code> في نص بحجم H1. <strong>قصة المستخدم رقم 2:</strong> يمكنني رؤية شرح مختصر مع <code>id="description"</code> في نص P الحجم. <strong>قصة المستخدم رقم 3:</strong> يمكنني رؤية <code>form</code> مع <code>id="survey-form"</code> . <strong>قصة المستخدم رقم 4:</strong> داخل عنصر النموذج ، يُطلب مني إدخال اسمي في حقل به <code>id="name"</code> . <strong>قصة المستخدم رقم 5:</strong> داخل عنصر النموذج ، يُطلب مني إدخال بريد إلكتروني في حقل به <code>id="email"</code> . <strong>قصة المستخدم رقم 6:</strong> إذا قمت بإدخال بريد إلكتروني لم يتم تنسيقه بشكل صحيح ، فسوف أرى خطأ في التحقق من صحة HTML5. <strong>قصة المستخدم رقم 7:</strong> داخل النموذج ، يمكنني إدخال رقم في حقل به <code>id="number"</code> . <strong>قصة المستخدم رقم 8:</strong> إذا قمت بإدخال أرقام غير أرقام في إدخال الرقم ، فسوف أرى خطأ التحقق من صحة HTML5. <strong>قصة المستخدم رقم 9:</strong> إذا كان إدخال أرقام خارج نطاق إدخال رقم، التي تم تعريفها من قبل <code>min</code> و <code>max</code> الصفات، وسوف ترى خطأ التحقق من صحة HTML5. <strong>قصة المستخدم رقم 10:</strong> بالنسبة إلى الاسم ، والبريد الإلكتروني ، وحقول إدخال الرقم داخل النموذج ، يمكنني مشاهدة تصنيفات مقابلة تصف الغرض من كل حقل بالمعرفات التالية: <code>id="name-label"</code> ، <code>id="email-label"</code> و <code>id="number-label"</code> . <strong>قصة المستخدم رقم 11:</strong> بالنسبة إلى الاسم ، والبريد الإلكتروني ، وحقول إدخال الرقم ، يمكنني رؤية نص العنصر النائب الذي يعطيني وصفًا أو إرشادات لكل حقل. <strong>قصة المستخدم رقم 12:</strong> داخل عنصر النموذج ، يمكنني تحديد خيار من قائمة منسدلة تحتوي على <code>id="dropdown"</code> مناظر <code>id="dropdown"</code> . <strong>قصة المستخدم رقم 13:</strong> داخل
|
||
|
|
|
||
|
|
## Instructions
|
||
|
|
<section id="instructions">
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Tests
|
||
|
|
<section id='tests'>
|
||
|
|
|
||
|
|
```yml
|
||
|
|
tests: []
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Challenge Seed
|
||
|
|
<section id='challengeSeed'>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Solution
|
||
|
|
<section id='solution'>
|
||
|
|
|
||
|
|
```js
|
||
|
|
// solution required
|
||
|
|
```
|
||
|
|
</section>
|