---
id: bd7158d8c442eddfaeb5bd13
title: أنشئ آلة Random Quote
challengeType: 3
forumTopicId: 301374
dashedName: build-a-random-quote-machine
---

# --description--

**متطلبات:** أنشئ تطبيق يشبه وظيفيا إلي <a href="https://random-quote-machine.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://random-quote-machine.freecodecamp.rocks/</a>.

أكمل قصص المستخدم بالأسفل وأجتاز جميع الاختبارات للنجاح. استخدم أي libraries أو APIs تحتاج إليها. أعطيها أسلوبك الشخصي الخاص.

يمكنك استخدام أي مزيج من HTML و JavaScript و CSS و Bootstrap و SASS و React و Redux و jQuery لإكمال هذا المشروع. يجب عليك استخدام frontend framework (مثل React على سبيل المثال) لأن هذا القسم يدور حول تعلم frontend framework. لا ينصح باستخدام التكنولوجيات الإضافية غير المدرجة أعلاه و استخدامها على مسؤوليتك الخاصة. ونحن ننظر في دعم frontend frameworks أخرى، مثل Angular و Vue، ولكنها غير مدعومة حاليا. سنقبل ونحاول إصلاح جميع تقارير المشكلات التي تستخدم حُزْمَة التكنولوجيات المقترحة لهذا المشروع. برمجة سعيدة!

**قصة المستخدم #1:** يمكنني رؤية عنصر تغليف مع `id="quote-box"`.

**قصة المستخدم #2:** في `#quote-box`، يمكنني أن أرى عنصرا يحتوي `id="text"`.

**قصة المستخدم #3:** في `#quote-box`، يمكنني أن أرى عنصرا يحتوي `id="author"`.

**قصة المستخدم #4:** في `#quote-box`، يمكنني رؤية عنصر قابل للنقر مع `id="new-quote"`.

**قصة المستخدم #5:** في `#quote-box`، يمكنني رؤية عنصر قابل للنقر `a` مع عنصر يحتوي `id="tweet-quote"`.

**قصة المستخدم #6:** عند التحميل ألأوله، تعرض آلة الاقتباس الخاصة بي اقتباس عشوائي في العنصر مع `id="text"`.

**قصة المستخدم #7:** عند التحميل الأول، تعرض آلة الاقتباس الخاصة بي مؤلف الاقتباس العشوائي في العنصر مع `id="author"`.

**قصة المستخدم #8:** عندما يتم النقر على زر `#new-quote`، آلة الاقتباس الخاصة بي يجب أن تجلب اقتباساً جديداً وأن تعرضه في عنصر `#text`.

**قصة المستخدم #9:** آلة الاقتباس الخاصة بي يجب أن تجلب مؤلف الاقتباس الجديد عندما يتم النقر على زر `#new-quote` وعرضه في عنصر `#author`.

**قصة المستخدم #10:** يمكنني تغليف الاقتباس الحالي بالنقر على `#tweet-quote` في `a` عنصر. هذا عنصر `a` يجب أن يتضمن `"twitter.com/intent/tweet"` في السمة `href` لتغريد الاقتباس الحالي.

**قصة المستخدم #11:** عنصر تغليف `#quote-box` يجب أن يكون مركزيا أفقيا. يرجى إجراء الاختبارات مع تكبير مستوى المتصفح بنسبة 100% وتعظيم الصفحة.

يمكنك بناء مشروعك عن طريق <a href='https://codepen.io/pen?template=MJjpwO' target="_blank" rel="noopener noreferrer nofollow">استخدام هذا نموذج CodePen</a> والنقر على `Save` لإنشاء طبقيك الخاص بك. أو يمكنك استخدام رابط الـ CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`

بمجرد أن تنتهي، ارسل عنوان URL لمشروع العمل الخاص بك مع اجتياز جميع الاختبارات.

**ملاحظة:** twitter لا يسمح بتحميل الروابط في iframe. حاول استخدام `target="_blank"` أو `target="_top"` سمة على عنصر `#tweet-quote` إذا لم يتم تحميل التغريدة الخاصة بك. `target="_top"` سوف يحل محل علامة التبويب الحالية لتتيقن من حفظ عملك.

# --solutions--

```js
// solution required
```
