39 lines
10 KiB
Markdown
39 lines
10 KiB
Markdown
|
---
|
||
|
|
id: bd7158d8c442eddfaeb5bd0f
|
||
|
|
title: Build a Pomodoro Clock
|
||
|
|
isRequired: true
|
||
|
|
challengeType: 3
|
||
|
|
videoUrl: ''
|
||
|
|
localeTitle: بناء على مدار الساعة بومودورو
|
||
|
|
---
|
||
|
|
|
||
|
|
## Description
|
||
|
|
<section id="description"> <strong>الهدف:</strong> إنشاء تطبيق <a href="https://codepen.io" target="_blank">CodePen.io</a> تشبه وظيفيًا هذا: <a href="https://codepen.io/freeCodeCamp/full/XpKrrW" target="_blank">https://codepen.io/freeCodeCamp/full/XpKrrW</a> . تحقق من <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">قصص المستخدمين</a> أدناه واجتاز جميع الاختبارات. اعطها اسلوبك الشخصي. يمكنك استخدام أي مزيج من HTML و JavaScript و CSS و Bootstrap و SASS و React و Redux و jQuery لإكمال هذا المشروع. يجب عليك استخدام إطار الواجهة الأمامية (مثل React على سبيل المثال) لأن هذا القسم يدور حول تعلم إطارات الواجهة الأمامية. لا يوصى باستخدام تقنيات إضافية غير مدرجة أعلاه واستخدامها على مسؤوليتك الخاصة. نحن نتطلع إلى دعم أطر عمل الواجهة الأخرى مثل Angular و Vue ، ولكنها غير مدعومة حاليًا. سنقبل ونحاول إصلاح جميع تقارير المشكلات التي تستخدم مجموعة التكنولوجيا المقترحة لهذا المشروع. الترميز سعيدة! <strong>قصة المستخدم رقم 1:</strong> يمكنني رؤية عنصر به <code>id="break-label"</code> يحتوي على سلسلة (مثل "Break Length"). <strong>قصة المستخدم رقم 2:</strong> يمكنني رؤية عنصر له <code>id="session-label"</code> يحتوي على سلسلة (مثل "طول الجلسة"). <strong>قصة المستخدم رقم 3:</strong> يمكنني رؤية عنصرين قابلين للنقر مع المعرفات المقابلة: <code>id="break-decrement"</code> و <code>id="session-decrement"</code> . <strong>قصة المستخدم رقم 4:</strong> يمكنني رؤية عنصرين قابلين للنقر مع المعرفات المقابلة: <code>id="break-increment"</code> و <code>id="session-increment"</code> . <strong>قصة المستخدم رقم 5:</strong> يمكنني رؤية عنصر له <code>id="break-length"</code> ، والذي يعرض افتراضيًا (عند التحميل) قيمة 5. <strong>قصة المستخدم رقم 6:</strong> يمكنني رؤية عنصر له <code>id="session-length"</code> مناظر <code>id="session-length"</code> ، والتي تعرض افتراضيًا قيمة 25. <strong>قصة المستخدم رقم 7:</strong> يمكنني رؤية عنصر له <code>id="timer-label"</code> المقابلة <code>id="timer-label"</code> ، يحتوي على سلسلة تشير إلى جلسة تمت تهيئتها (على سبيل المثال" جلسة ") . <strong>قصة المستخدم رقم 8:</strong> يمكنني رؤية عنصر له <code>id="time-left"</code> . ملاحظة: متوقفة مؤقتًا أو قيد التشغيل ، يجب دائمًا عرض القيمة في هذا الحقل بتنسيق <code>mm:ss</code> (أي 25:00). <strong>قصة المستخدم رقم 9:</strong> يمكنني رؤية عنصر قابل للنقر به <code>id="start_stop"</code> مناظر <code>id="start_stop"</code> . <strong>قصة المستخدم رقم 10:</strong> يمكنني رؤية عنصر قابل للنقر به <code>id="reset"</code> مناظر <code>id="reset"</code> . <strong>قصة المستخدم رقم 11:</strong> عندما أنقر على العنصر الذي يحتوي على معرف <code>reset</code> ، يجب إيقاف أي موقت تشغيل ، يجب أن ترجع القيمة في <code>id="break-length"</code> إلى <code>5</code> ، فيجب أن ترجع القيمة داخل <code>id="session-length"</code> إلى 25 ،
|
||
|
|
|
||
|
|
## Instructions
|
||
|
|
<section id="instructions">
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Tests
|
||
|
|
<section id='tests'>
|
||
|
|
|
||
|
|
```yml
|
||
|
|
tests: []
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Challenge Seed
|
||
|
|
<section id='challengeSeed'>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Solution
|
||
|
|
<section id='solution'>
|
||
|
|
|
||
|
|
```js
|
||
|
|
// solution required
|
||
|
|
```
|
||
|
|
</section>
|