---
id: bd7158d8c442eddfaeb5bd0f
title: أنشئ ساعة 25 + 5
challengeType: 3
forumTopicId: 301373
dashedName: build-a-25--5-clock
---

# --description--

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

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

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

**قصة المستخدم #1:** يمكنني رؤية عنصر مع `id="break-label"` الذي يحتوي على سلسلة (على سبيل المثال "Break Length").

**قصة المستخدم #2:** يمكنني رؤية عنصر مع `id="session-label"` الذي يحتوي على سلسلة (على سبيل المثال "Session Length").

**قصة المستخدم #3:** يمكنني أن أرى عنصرين يمكن النقر عليهما معرفين بشكل: `id="break-decrement"` و `id="session-decrement"`.

**قصة المستخدم #4:** يمكنني أن أرى عنصرين يمكن النقر عليهما معرفين بشكل: `id="break-increment"` و `id="session-increment"`.

**قصة المستخدم #5:** يمكنني مشاهدة عنصر مع `id="break-length"`, الذي يعرض (display) بشكل افتراضي (في التحميل) بقيمة 5.

**قصة المستخدم #6:** يمكنني أن أرى عنصرا مع `id="session-length"`، الذي يعرض بشكل افتراضي بقيمة 25.

**قصة المستخدم #7:** يمكنني أن أرى عنصرا مع `id="timer-label"`، يحتوي على سلسلة تشير إلى أن الجَلسة تم تهيئتها ("e.g. "Session).

**قصة المستخدم #8:** يمكنني مشاهدة عنصر مع `id="time-left"`. ملاحظة: أيقاف أو تشغيل القيمة في هذا الحقل يجب أن تظهر دائما بصيغة `mm:ss` (مثل 25:00).

**قصة المستخدم #9:** يمكنني رؤية عنصر قابل للنقر مع `id="start_stop"`.

**قصة المستخدم #10:** يمكنني رؤية عنصر قابل للنقر مع `id="reset"`.

**قصة المستخدم #11:** عندما أنقر على العنصر مع معرف `reset`، أي مؤقت قيد التشغيل يجب إيقافه، القيمة ضمن `id="break-length"` يجب أن تنتج `5`، القيمة ضمن `id="session-length"` يجب أن تعود إلى 25، والعنصر مع `id="time-left"` يجب أن يعاد تعيينه إلى حالته (state) الافتراضية.

**قصة المستخدم #12:** عندما أنقر على العنصر مع معرف `break-decrement`، القيمة ضمن `id="break-length"` مراسيم بقيمة 1، ويمكنني أن أرى القيمة المحدثة.

**قصة المستخدم #13:** عندما أنقر على العنصر مع معرف `break-increment`، القيمة ضمن `id="break-length"` زيادة بقيمة 1، ويمكنني أن أرى القيمة المحدثة.

**قصة المستخدم #14:** عندما أنقر على العنصر مع معرف `session-decrement`، القيمة ضمن `id="session-length"` تقل بقيمة 1، ويمكنني أن أرى القيمة المحدثة.

**قصة المستخدم #15:** عندما أنقر على العنصر مع معرف `session-increment`، القيمة ضمن `id="session-length"` تزداد بقيمة 1، ويمكنني أن أرى القيمة المحدثة.

**قصة المستخدم #16:** يجب ألا أكون قادرا على تعيين جَلسة أو طول الاستراحة إلى &lt;= 0.

**قصة المستخدم #17:** يجب ألا أكون قادرا على تعيين جَلسة أو طول الاستراحة إلى > 60.

**قصة المستخدم #18:** عندما أنقر أول مرة على العنصر باستخدام `id="start_stop"`، يجب أن يبدأ المؤقت تشغيل من القيمة المعروضة حاليا في `id="session-length"`، حتى إذا تم زيادة القيمة أو تخفيضها من القيمة الأصلية البالغة 25.

**قصة المستخدم #19:** إذا كان المؤقت قيد التشغيل، يجب أن يعرض العنصر الذي يحتوي على معرف `time-left` الوقت المتبقي في تنسيق `mm:ss` (قلل القيمة مرة 1 وتحديث العرض كل 1000ms).

**قصة المستخدم #20:** إذا كان المؤقت قيد التشغيل وانقر على العنصر مع `id="start_stop"`، يجب أن يتوقف العد التنازلي.

**قصة المستخدم #21:** إذا تم إيقاف مؤقت وانقر على العنصر مع `id="start_stop"`، وينبغي أن يستأنف العد التنازلي من النقطة التي توقف عندها العد.

**قصة المستخدم #22:** عندما يصل العد التنازلي للجلسات إلى صفر (لاحظ: مؤقت يصل إلى 00:00)، ويبدأ العد التنازلي جديد، يجب أن يعرض العنصر الذي يحتوي على معرف `timer-label` سلسلة تشير إلى أن مدّة الاستراحة قد بدأت.

**قصة المستخدم #23:** عندما يصل العد التنازلي للجلسات إلى صفر (لاحظ: مؤقت يصل إلى 00:00)، ينبغي أن يبدأ العد التنازلي الجديد في الاستراحة، مع العد التنازلي من القيمة المعروضة حاليا في عنصر `id="break-length"`.

**قصة المستخدم #24:** عندما يصل العد التنازلي للاستراحة إلى صفر (لاحظ: مؤقت يصل إلى 00:00)، ويبدأ العد التنازلي جديد، يجب أن يعرض العنصر الذي يحتوي على معرف `timer-label` سلسلة تشير إلى أن مدّة للجلسات قد بدأت.

**قصة المستخدم #25:** عندما يصل العد التنازلي للاستراحة إلى صفر (لاحظ: مؤقت يصل إلى 00:00)، ينبغي أن يبدأ العد التنازلي الجديد في الجلسات، مع العد التنازلي من القيمة المعروضة حاليا في عنصر `id="session-length"`.

**قصة المستخدم #26:** عندما يصل العد التنازلي إلى صفر (لاحظ: المؤقت يجب أن يصل إلى 00:00)، يجب تشغيل صوت يشير إلى أن الوقت في الأعلى. يجب أن تستخدم هذا وسم `audio` في HTML5 وأن يحتوي على `id="beep"`.

**قصة المستخدم #27:** عنصر الصوت مع `id="beep"` يجب أن يكون ثانية واحدة أو أكثر.

**قصة المستخدم #28:** عنصر الصوت مع معرف `beep` يجب أن يتوقف عن التشغيل وأن يعاد جرح إلى البداية عند النقر على العنصر مع معرف `reset`.

يمكنك بناء مشروعك عن طريق <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 لمشروع العمل الخاص بك مع اجتياز جميع الاختبارات.

# --solutions--

```js
// solution required
```
