10 KiB
10 KiB
id | title | isRequired | challengeType | videoUrl | localeTitle |
---|---|---|---|---|---|
bd7158d8c442eddfaeb5bd0f | Build a Pomodoro Clock | true | 3 | بناء على مدار الساعة بومودورو |
Description
id="break-label"
يحتوي على سلسلة (مثل "Break Length"). قصة المستخدم رقم 2: يمكنني رؤية عنصر له id="session-label"
يحتوي على سلسلة (مثل "طول الجلسة"). قصة المستخدم رقم 3: يمكنني رؤية عنصرين قابلين للنقر مع المعرفات المقابلة: id="break-decrement"
و id="session-decrement"
. قصة المستخدم رقم 4: يمكنني رؤية عنصرين قابلين للنقر مع المعرفات المقابلة: id="break-increment"
و id="session-increment"
. قصة المستخدم رقم 5: يمكنني رؤية عنصر له id="break-length"
، والذي يعرض افتراضيًا (عند التحميل) قيمة 5. قصة المستخدم رقم 6: يمكنني رؤية عنصر له id="session-length"
مناظر id="session-length"
، والتي تعرض افتراضيًا قيمة 25. قصة المستخدم رقم 7: يمكنني رؤية عنصر له id="timer-label"
المقابلة id="timer-label"
، يحتوي على سلسلة تشير إلى جلسة تمت تهيئتها (على سبيل المثال" جلسة ") . قصة المستخدم رقم 8: يمكنني رؤية عنصر له id="time-left"
. ملاحظة: متوقفة مؤقتًا أو قيد التشغيل ، يجب دائمًا عرض القيمة في هذا الحقل بتنسيق mm:ss
(أي 25:00). قصة المستخدم رقم 9: يمكنني رؤية عنصر قابل للنقر به id="start_stop"
مناظر id="start_stop"
. قصة المستخدم رقم 10: يمكنني رؤية عنصر قابل للنقر به id="reset"
مناظر id="reset"
. قصة المستخدم رقم 11: عندما أنقر على العنصر الذي يحتوي على معرف reset
، يجب إيقاف أي موقت تشغيل ، يجب أن ترجع القيمة في id="break-length"
إلى 5
، فيجب أن ترجع القيمة داخل id="session-length"
إلى 25 ، والعنصر الذي له id="time-left"
يجب إعادة تعيينه إلى حالته الافتراضية. قصة المستخدم رقم 12: عندما أنقر على العنصر بمعرّف break-decrement
، فإن القيمة ضمن break-decrement
id="break-length"
بقيمة 1 ، ويمكنني رؤية القيمة المحدّثة. قصة المستخدم رقم 13: عندما أنقر على العنصر الذي يحتوي على معرّف break-increment
، فإن القيمة ضمن break-increment
id="break-length"
بقيمة 1 ، ويمكنني رؤية القيمة المحدّثة. قصة المستخدم رقم 14: عندما أنقر على العنصر بمعرّف session-decrement
، فإن القيمة ضمن session-decrement
id="session-length"
بقيمة 1 ، ويمكنني رؤية القيمة المحدّثة. قصة المستخدم رقم 15: عندما أنقر على العنصر بمعرّف session-increment
، فإن القيمة ضمن قيمة id="session-length"
بقيمة 1 ، ويمكنني رؤية القيمة المحدّثة. قصة المستخدم رقم 16: لا يجب أن أتمكن من تعيين جلسة أو طول للكسر إلى <= 0. قصة المستخدم رقم 17: لا ينبغي أن أتمكن من تعيين جلسة أو طول للكسر إلى> 60. قصة المستخدم رقم 18: عندما أكون أولاً ، انقر فوق العنصر مع id="start_stop"
، يجب أن يبدأ تشغيل جهاز ضبط الوقت من القيمة المعروضة حاليًا في id="session-length"
، حتى إذا تم زيادة القيمة أو إنقاصها من القيمة الأصلية لـ 25. قصة المستخدم رقم 19 : إذا كان المؤقت يعمل ، فيجب أن يعرض العنصر ذو معرف time-left
الوقت المتبقي بتنسيق mm:ss
(يتناقص بقيمة 1 وتحديث العرض كل 1000ms). قصة المستخدم رقم 20: إذا كان المؤقت يعمل id="start_stop"
على العنصر الذي يحمل id="start_stop"
، فيجب أن يتوقف العد التنازلي. قصة المستخدم رقم 21: إذا تم إيقاف المؤقت مؤقتًا ، id="start_stop"
على العنصر ذي 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
التعيين. يمكنك بناء مشروعك عن طريق تسجيل قلم CodePen هذا . أو يمكنك استخدام رابط CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
بمجرد الانتهاء ، أرسل عنوان URL إلى عملك مشروع مع كل اختباراتها تمر. تذكر استخدام طريقة Read-Search-Ask إذا واجهتك مشكلة. Instructions
Tests
tests: []
Challenge Seed
Solution
// solution required