freeCodeCamp

5.9 KiB

Raw Blame History

id	title	isRequired	challengeType	videoUrl	localeTitle
587d78af367417b2b2512b03	Build a Survey Form	true	3		بناء نموذج المسح

Description

الهدف: إنشاء تطبيق CodePen.io يشبه وظيفيًا هذا: https://codepen.io/freeCodeCamp/full/VPaoNP . تحقق من قصص المستخدمين أدناه واجتاز جميع الاختبارات. اعطها اسلوبك الشخصي. يمكنك استخدام HTML و JavaScript و CSS لإكمال هذا المشروع. يوصى باستخدام CSS العادي لأن هذا هو ما غطته الدروس حتى الآن ، ويجب أن تحصل على بعض التمرين باستخدام CSS عادي. يمكنك استخدام Bootstrap أو SASS إذا اخترت. لا يوصى باستخدام هذا النوع من التقنيات الإضافية (على سبيل المثال jQuery أو React أو Angular أو Vue) ، ويكون استخدامها على مسؤوليتك الخاصة. سوف تعطيك مشاريع أخرى فرصة للعمل مع مكدسات التكنولوجيا المختلفة مثل React. سنقبل ونحاول إصلاح جميع تقارير المشكلات التي تستخدم مجموعة التكنولوجيا المقترحة لهذا المشروع. الترميز سعيدة! قصة المستخدم رقم 1: يمكنني رؤية عنوان له id="title" في نص بحجم H1. قصة المستخدم رقم 2: يمكنني رؤية شرح مختصر مع id="description" في نص P الحجم. قصة المستخدم رقم 3: يمكنني رؤية form مع id="survey-form" . قصة المستخدم رقم 4: داخل عنصر النموذج ، يُطلب مني إدخال اسمي في حقل به id="name" . قصة المستخدم رقم 5: داخل عنصر النموذج ، يُطلب مني إدخال بريد إلكتروني في حقل به id="email" . قصة المستخدم رقم 6: إذا قمت بإدخال بريد إلكتروني لم يتم تنسيقه بشكل صحيح ، فسوف أرى خطأ في التحقق من صحة HTML5. قصة المستخدم رقم 7: داخل النموذج ، يمكنني إدخال رقم في حقل به id="number" . قصة المستخدم رقم 8: إذا قمت بإدخال أرقام غير أرقام في إدخال الرقم ، فسوف أرى خطأ التحقق من صحة HTML5. قصة المستخدم رقم 9: إذا كان إدخال أرقام خارج نطاق إدخال رقم، التي تم تعريفها من قبل min و max الصفات، وسوف ترى خطأ التحقق من صحة HTML5. قصة المستخدم رقم 10: بالنسبة إلى الاسم ، والبريد الإلكتروني ، وحقول إدخال الرقم داخل النموذج ، يمكنني مشاهدة تصنيفات مقابلة تصف الغرض من كل حقل بالمعرفات التالية: id="name-label" ، id="email-label" و id="number-label" . قصة المستخدم رقم 11: بالنسبة إلى الاسم ، والبريد الإلكتروني ، وحقول إدخال الرقم ، يمكنني رؤية نص العنصر النائب الذي يعطيني وصفًا أو إرشادات لكل حقل. قصة المستخدم رقم 12: داخل عنصر النموذج ، يمكنني تحديد خيار من قائمة منسدلة تحتوي على id="dropdown" مناظر id="dropdown" . قصة المستخدم رقم 13: داخل عنصر النموذج ، يمكنني تحديد حقل من مجموعة واحدة أو أكثر من أزرار الاختيار. يجب تجميع كل مجموعة باستخدام سمة name . قصة المستخدم رقم 14: داخل عنصر النموذج ، يمكنني تحديد عدة حقول من سلسلة من مربعات الاختيار ، التي يجب أن يكون لكل منها سمة value . قصة المستخدم رقم 15: داخل عنصر النموذج ، يتم textarea مع نص في النهاية للحصول على تعليقات إضافية. قصة المستخدم رقم 16: داخل عنصر النموذج ، يتم تقديم الزر مع id="submit" لإرسال كل مدخلاتي. يمكنك بناء مشروعك عن طريق تسجيل قلم CodePen هذا . أو يمكنك استخدام رابط CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js بمجرد الانتهاء ، أرسل عنوان URL إلى عملك مشروع مع كل اختباراتها تمر. تذكر استخدام طريقة Read-Search-Ask إذا واجهتك مشكلة.

Instructions

Tests

tests: []

Challenge Seed

Solution

// solution required

5.9 KiB Raw Blame History