39 lines
4.6 KiB
Markdown
39 lines
4.6 KiB
Markdown
|
---
|
||
|
|
id: bd7157d8c242eddfaeb5bd13
|
||
|
|
title: Build a Markdown Previewer
|
||
|
|
isRequired: true
|
||
|
|
challengeType: 3
|
||
|
|
videoUrl: ''
|
||
|
|
localeTitle: بناء على Markdown Previewer
|
||
|
|
---
|
||
|
|
|
||
|
|
## Description
|
||
|
|
<section id="description"> <strong>الهدف:</strong> إنشاء تطبيق <a href="https://codepen.io" target="_blank">CodePen.io</a> تشبه وظيفيًا هذا: <a href="https://codepen.io/freeCodeCamp/full/GrZVVO" target="_blank">https://codepen.io/freeCodeCamp/full/GrZVVO</a> . تحقق من <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">قصص المستخدمين</a> أدناه واجتاز جميع الاختبارات. اعطها اسلوبك الشخصي. يمكنك استخدام أي مزيج من HTML و JavaScript و CSS و Bootstrap و SASS و React و Redux و jQuery لإكمال هذا المشروع. يجب عليك استخدام إطار الواجهة الأمامية (مثل React على سبيل المثال) لأن هذا القسم يدور حول تعلم إطارات الواجهة الأمامية. لا يوصى باستخدام تقنيات إضافية غير مدرجة أعلاه واستخدامها على مسؤوليتك الخاصة. نحن نتطلع إلى دعم أطر عمل الواجهة الأخرى مثل Angular و Vue ، ولكنها غير مدعومة حاليًا. سنقبل ونحاول إصلاح جميع تقارير المشكلات التي تستخدم مجموعة التكنولوجيا المقترحة لهذا المشروع. الترميز سعيدة! <strong>قصة المستخدم رقم 1:</strong> يمكنني رؤية عنصر <code>textarea</code> مع <code>id="editor"</code> المقابلة <code>id="editor"</code> . <strong>قصة المستخدم رقم 2:</strong> يمكنني رؤية عنصر له <code>id="preview"</code> مناظر <code>id="preview"</code> . <strong>قصة المستخدم رقم 3:</strong> عند إدخال نص في عنصر <code>#editor</code> ، يتم تحديث عنصر <code>#preview</code> أثناء الكتابة لعرض محتوى النص. <strong>قصة المستخدم رقم 4:</strong> عندما أقوم بإدخال <code>#editor</code> GitHub في عنصر <code>#editor</code> ، يتم عرض النص على هيئة HTML في عنصر <code>#preview</code> أثناء الكتابة (HINT: لست بحاجة إلى تحليل Markdown بنفسك - يمكنك استيراد المكتبة المحددة لهذا: <a href="https://cdnjs.com/libraries/marked" target="_blank">https://cdnjs.com/libraries/marked</a> ). <strong>قصة المستخدم رقم 5:</strong> عندما يتم أولاً تحميل أداة معاينة <code>#editor</code> يجب أن يحتوي النص الافتراضي في الحقل <code>#editor</code> على <code>#editor</code> صالحة تمثل عنصرًا واحدًا على الأقل من كل عنصر من العناصر التالية: رأس (حجم H1) ، رأس فرعي (حجم H2) ، ورابط ، ورمز مضمّن ، وكتلة برمجية ، وبند قائمة ، وقطعة اقتباس ، وصورة ، ونص غامق. <strong>قصة المستخدم رقم 6:</strong> عندما يتم أولاً تحميل أداة معاينة <code>#editor</code> يجب أن يتم عرض <code>#editor</code> حقل <code>#editor</code> على <code>#editor</code> HTML في عنصر <code>#preview</code> . <strong>مكافأة اختيارية (لا تحتاج إلى إجراء اختبار تجريبي):</strong> يفسر أداة معاينة العلامة التجارية الخاصة بي إرجاع الإرجاع وتجعلها كعناصر <code>br</code> (فواصل الأسطر). يمكنك بناء مشروعك عن طريق <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">تسجيل قلم CodePen هذا</a> . أو يمكنك استخدام رابط CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> بمجرد الانتهاء ، أرسل عنوان URL إلى عملك مشروع مع كل اختباراتها تمر. تذكر استخدام طريقة <a href="https://forum
|
||
|
|
|
||
|
|
## 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>
|