freeCodeCamp

4.6 KiB

Raw Blame History

id	title	isRequired	challengeType	videoUrl	localeTitle
bd7157d8c242eddfaeb5bd13	Build a Markdown Previewer	true	3		بناء على Markdown Previewer

Description

الهدف: إنشاء تطبيق CodePen.io تشبه وظيفيًا هذا: https://codepen.io/freeCodeCamp/full/GrZVVO . تحقق من قصص المستخدمين أدناه واجتاز جميع الاختبارات. اعطها اسلوبك الشخصي. يمكنك استخدام أي مزيج من HTML و JavaScript و CSS و Bootstrap و SASS و React و Redux و jQuery لإكمال هذا المشروع. يجب عليك استخدام إطار الواجهة الأمامية (مثل React على سبيل المثال) لأن هذا القسم يدور حول تعلم إطارات الواجهة الأمامية. لا يوصى باستخدام تقنيات إضافية غير مدرجة أعلاه واستخدامها على مسؤوليتك الخاصة. نحن نتطلع إلى دعم أطر عمل الواجهة الأخرى مثل Angular و Vue ، ولكنها غير مدعومة حاليًا. سنقبل ونحاول إصلاح جميع تقارير المشكلات التي تستخدم مجموعة التكنولوجيا المقترحة لهذا المشروع. الترميز سعيدة! قصة المستخدم رقم 1: يمكنني رؤية عنصر textarea مع id="editor" المقابلة id="editor" . قصة المستخدم رقم 2: يمكنني رؤية عنصر له id="preview" مناظر id="preview" . قصة المستخدم رقم 3: عند إدخال نص في عنصر #editor ، يتم تحديث عنصر #preview أثناء الكتابة لعرض محتوى النص. قصة المستخدم رقم 4: عندما أقوم بإدخال #editor GitHub في عنصر #editor ، يتم عرض النص على هيئة HTML في عنصر #preview أثناء الكتابة (HINT: لست بحاجة إلى تحليل Markdown بنفسك - يمكنك استيراد المكتبة المحددة لهذا: https://cdnjs.com/libraries/marked ). قصة المستخدم رقم 5: عندما يتم أولاً تحميل أداة معاينة #editor يجب أن يحتوي النص الافتراضي في الحقل #editor على #editor صالحة تمثل عنصرًا واحدًا على الأقل من كل عنصر من العناصر التالية: رأس (حجم H1) ، رأس فرعي (حجم H2) ، ورابط ، ورمز مضمّن ، وكتلة برمجية ، وبند قائمة ، وقطعة اقتباس ، وصورة ، ونص غامق. قصة المستخدم رقم 6: عندما يتم أولاً تحميل أداة معاينة #editor يجب أن يتم عرض #editor حقل #editor على #editor HTML في عنصر #preview . مكافأة اختيارية (لا تحتاج إلى إجراء اختبار تجريبي): يفسر أداة معاينة العلامة التجارية الخاصة بي إرجاع الإرجاع وتجعلها كعناصر br (فواصل الأسطر). يمكنك بناء مشروعك عن طريق تسجيل قلم CodePen هذا . أو يمكنك استخدام رابط CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js بمجرد الانتهاء ، أرسل عنوان URL إلى عملك مشروع مع كل اختباراتها تمر. تذكر استخدام طريقة Read-Search-Ask إذا واجهتك مشكلة.

Instructions

Tests

tests: []

Challenge Seed

Solution

// solution required

4.6 KiB Raw Blame History