39 lines
5.1 KiB
Markdown
39 lines
5.1 KiB
Markdown
|
---
|
||
|
|
id: bd7158d8c442eddfaeb5bd13
|
||
|
|
title: Build a Random Quote Machine
|
||
|
|
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/qRZeGZ" target="_blank">https://codepen.io/freeCodeCamp/full/qRZeGZ</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>id="quote-box"</code> مناظر <code>id="quote-box"</code> . <strong>قصة المستخدم رقم 2:</strong> داخل <code>#quote-box</code> ، يمكنني رؤية عنصر له <code>id="text"</code> . <strong>قصة المستخدم رقم 3:</strong> داخل <code>#quote-box</code> ، يمكنني رؤية عنصر له <code>id="author"</code> . <strong>قصة المستخدم رقم 4:</strong> داخل <code>#quote-box</code> ، يمكنني رؤية عنصر قابل للنقر به <code>id="new-quote"</code> مناظر <code>id="new-quote"</code> . <strong>قصة المستخدم رقم 5:</strong> داخل <code>#quote-box</code> ، أستطيع أن أرى كلمة قابلة للنقر <codea< code=""> مع <code>id="tweet-quote"</code> المقابلة <code>id="tweet-quote"</code> . <strong>قصة المستخدم رقم 6:</strong> عند التحميل الأول ، يعرض جهاز عرض الأسعار اقتباسًا عشوائيًا في العنصر مع <code>id="text"</code> . <strong>قصة المستخدم رقم 7:</strong> عند التحميل الأول ، يعرض جهاز عرض الأسعار الخاص بي مؤلف الاقتباس العشوائي في العنصر مع <code>id="author"</code> . <strong>قصة المستخدم رقم 8:</strong> عندما يتم النقر على الزر <code>#new-quote</code> ، يجب أن يجلب جهاز عرض الأسعار الخاص بي عرض أسعار جديدًا <code>#text</code> عنصر <code>#text</code> . <strong>قصة المستخدم رقم 9:</strong> يجب أن تحضر جهاز عرض الأسعار الخاص بي مؤلف الاقتباس الجديد عندما يتم النقر على زر <code>#new-quote</code> وعرضه في عنصر <code>#author</code> . <strong>قصة المستخدم # 10:</strong> أستطيع أن تغرد الاقتباس الحالي بالضغط على <code>#tweet-quote</code> <code>a</code> العنصر. هذا <code>a</code> ينبغي أن تتضمن عنصرا من <code>"twitter.com/intent/tweet"</code> المسار في انها <code>href</code> السمة إلى تغرد الاقتباس الحالي. <strong>قصة المستخدم رقم 11:</strong> يجب أن يكون عنصر مجمّع <code>#quote-box</code> أفقيًا في الوسط. يرجى تشغيل اختبارات بمستوى التكبير في المتصفح بنسبة 100٪ وزيادة حجم الصفحة. يمكنك بناء مشروعك عن طريق <a h
|
||
|
|
|
||
|
|
## 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>
|