freeCodeCamp

10 KiB

Raw Blame History

id	title	isRequired	challengeType	videoUrl	localeTitle
bd7158d8c442eddfaeb5bd0f	Build a Pomodoro Clock	true	3		بناء على مدار الساعة بومودورو

Description

الهدف: إنشاء تطبيق CodePen.io تشبه وظيفيًا هذا: https://codepen.io/freeCodeCamp/full/XpKrrW . تحقق من قصص المستخدمين أدناه واجتاز جميع الاختبارات. اعطها اسلوبك الشخصي. يمكنك استخدام أي مزيج من HTML و JavaScript و CSS و Bootstrap و SASS و React و Redux و jQuery لإكمال هذا المشروع. يجب عليك استخدام إطار الواجهة الأمامية (مثل React على سبيل المثال) لأن هذا القسم يدور حول تعلم إطارات الواجهة الأمامية. لا يوصى باستخدام تقنيات إضافية غير مدرجة أعلاه واستخدامها على مسؤوليتك الخاصة. نحن نتطلع إلى دعم أطر عمل الواجهة الأخرى مثل Angular و Vue ، ولكنها غير مدعومة حاليًا. سنقبل ونحاول إصلاح جميع تقارير المشكلات التي تستخدم مجموعة التكنولوجيا المقترحة لهذا المشروع. الترميز سعيدة! قصة المستخدم رقم 1: يمكنني رؤية عنصر به 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

10 KiB Raw Blame History