freeCodeCamp/curriculum/challenges/arabic/03-front-end-libraries/front-end-libraries-projects/build-a-random-quote-machine.arabic.md

id, title, isRequired, challengeType, videoUrl, localeTitle

id	title	isRequired	challengeType	videoUrl	localeTitle
bd7158d8c442eddfaeb5bd13	Build a Random Quote Machine	true	3		بناء آلة اقتباس عشوائي

Description

الهدف: إنشاء تطبيق CodePen.io تشبه وظيفيًا هذا: https://codepen.io/freeCodeCamp/full/qRZeGZ . تحقق من قصص المستخدمين أدناه واجتاز جميع الاختبارات. اعطها اسلوبك الشخصي. يمكنك استخدام أي مزيج من HTML و JavaScript و CSS و Bootstrap و SASS و React و Redux و jQuery لإكمال هذا المشروع. يجب عليك استخدام إطار الواجهة الأمامية (مثل React على سبيل المثال) لأن هذا القسم يدور حول تعلم إطارات الواجهة الأمامية. لا يوصى باستخدام تقنيات إضافية غير مدرجة أعلاه واستخدامها على مسؤوليتك الخاصة. نحن نتطلع إلى دعم أطر عمل الواجهة الأخرى مثل Angular و Vue ، ولكنها غير مدعومة حاليًا. سنقبل ونحاول إصلاح جميع تقارير المشكلات التي تستخدم مجموعة التكنولوجيا المقترحة لهذا المشروع. الترميز سعيدة! قصة المستخدم رقم 1: يمكنني رؤية عنصر مجمّع ذو id="quote-box" مناظر id="quote-box" . قصة المستخدم رقم 2: داخل #quote-box ، يمكنني رؤية عنصر له id="text" . قصة المستخدم رقم 3: داخل #quote-box ، يمكنني رؤية عنصر له id="author" . قصة المستخدم رقم 4: داخل #quote-box ، يمكنني رؤية عنصر قابل للنقر به id="new-quote" مناظر id="new-quote" . قصة المستخدم رقم 5: داخل #quote-box ، أستطيع أن أرى كلمة قابلة للنقر مع id="tweet-quote" المقابلة id="tweet-quote" . قصة المستخدم رقم 6: عند التحميل الأول ، يعرض جهاز عرض الأسعار اقتباسًا عشوائيًا في العنصر مع id="text" . قصة المستخدم رقم 7: عند التحميل الأول ، يعرض جهاز عرض الأسعار الخاص بي مؤلف الاقتباس العشوائي في العنصر مع id="author" . قصة المستخدم رقم 8: عندما يتم النقر على الزر #new-quote ، يجب أن يجلب جهاز عرض الأسعار الخاص بي عرض أسعار جديدًا #text عنصر #text . قصة المستخدم رقم 9: يجب أن تحضر جهاز عرض الأسعار الخاص بي مؤلف الاقتباس الجديد عندما يتم النقر على زر #new-quote وعرضه في عنصر #author . قصة المستخدم # 10: أستطيع أن تغرد الاقتباس الحالي بالضغط على #tweet-quote a العنصر. هذا a ينبغي أن تتضمن عنصرا من "twitter.com/intent/tweet" المسار في انها href السمة إلى تغرد الاقتباس الحالي. قصة المستخدم رقم 11: يجب أن يكون عنصر مجمّع #quote-box أفقيًا في الوسط. يرجى تشغيل اختبارات بمستوى التكبير في المتصفح بنسبة 100٪ وزيادة حجم الصفحة. يمكنك بناء مشروعك عن طريق تسجيل قلم CodePen هذا . أو يمكنك استخدام رابط CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js بمجرد الانتهاء ، أرسل عنوان URL إلى عملك مشروع مع كل اختباراتها تمر. تذكر استخدام طريقة Read-Search-Ask إذا واجهتك مشكلة.

Instructions

Tests

tests: []

Challenge Seed

Solution

// solution required