39 lines
5.0 KiB
Markdown
39 lines
5.0 KiB
Markdown
|
---
|
||
|
|
id: 587d7dbc367417b2b2512bae
|
||
|
|
title: Build a Drum Machine
|
||
|
|
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/MJyNMd" target="_blank">https://codepen.io/freeCodeCamp/full/MJyNMd</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="drum-machine"</code> أداة <code>id="drum-machine"</code> تحتوي على جميع العناصر الأخرى. <strong>قصة المستخدم رقم 2:</strong> داخل <code>#drum-machine</code> أستطيع أن أرى عنصرًا به <code>id="display"</code> مناظر <code>id="display"</code> . <strong>قصة المستخدم رقم 3:</strong> داخل <code>#drum-machine</code> يمكنني رؤية 9 عناصر لوحة اسطوانة قابلة للنقر ، لكل منها اسم صنف من <code>drum-pad</code> ، وهو معرف فريد يصف المقطع الصوتي الذي سيتم إعداده على لوحة السماعة ، النص الذي يتوافق مع أحد المفاتيح التالية على لوحة المفاتيح: Q ، W ، E ، A ، S ، D ، Z ، X ، C. يجب أن تكون وسادات الأسطوانة بهذا الترتيب. <strong>قصة المستخدم 4:</strong> داخل كل <code>.drum-pad</code> ، يجب أن يكون هناك عنصر <code>audio</code> HTML5 يحتوي على سمة <code>src</code> تشير إلى مقطع صوتي ، واسم <code>clip</code> ، ومعرف مطابق للنص الداخلي <code>.drum-pad</code> (على سبيل المثال <code>id="Q"</code> ، <code>id="W"</code> ، <code>id="E"</code> إلخ.). <strong>قصة المستخدم رقم 5:</strong> عندما أنقر على عنصر <code>.drum-pad</code> ، يجب تشغيل المقطع الصوتي الموجود في عنصر <code>audio</code> الطفل الخاص به. <strong>قصة المستخدم رقم 6:</strong> عندما أضغط مفتاح المشغل المرتبط بكل <code>.drum-pad</code> ، يجب تشغيل المقطع الصوتي الموجود في عنصر <code>audio</code> الطفل الخاص به (على سبيل المثال ، الضغط على المفتاح Q يؤدي إلى تشغيل لوحة الأسطوانة التي تحتوي على السلسلة "Q" ، الضغط على المفتاح W يجب أن يؤدي إلى تشغيل لوحة البراميل التي تحتوي على السلسلة "W" ، وما إلى ذلك). <strong>قصة المستخدم رقم 7:</strong> عندما يتم تشغيل <code>.drum-pad</code> يتم عرض سلسلة تصف المقطع الصوتي المرتبط كنص داخلي للعنصر <code>#display</code> (يجب أن تكون كل سلسلة فريدة). يمكنك بناء مشروعك عن طريق <a href="ht
|
||
|
|
|
||
|
|
## 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>
|