5.0 KiB
5.0 KiB
id | title | isRequired | challengeType | videoUrl | localeTitle |
---|---|---|---|---|---|
587d7dbc367417b2b2512bae | Build a Drum Machine | true | 3 | بناء آلة طبل |
Description
id="drum-machine"
أداة id="drum-machine"
تحتوي على جميع العناصر الأخرى. قصة المستخدم رقم 2: داخل #drum-machine
أستطيع أن أرى عنصرًا به id="display"
مناظر id="display"
. قصة المستخدم رقم 3: داخل #drum-machine
يمكنني رؤية 9 عناصر لوحة اسطوانة قابلة للنقر ، لكل منها اسم صنف من drum-pad
، وهو معرف فريد يصف المقطع الصوتي الذي سيتم إعداده على لوحة السماعة ، النص الذي يتوافق مع أحد المفاتيح التالية على لوحة المفاتيح: Q ، W ، E ، A ، S ، D ، Z ، X ، C. يجب أن تكون وسادات الأسطوانة بهذا الترتيب. قصة المستخدم 4: داخل كل .drum-pad
، يجب أن يكون هناك عنصر audio
HTML5 يحتوي على سمة src
تشير إلى مقطع صوتي ، واسم clip
، ومعرف مطابق للنص الداخلي .drum-pad
(على سبيل المثال id="Q"
، id="W"
، id="E"
إلخ.). قصة المستخدم رقم 5: عندما أنقر على عنصر .drum-pad
، يجب تشغيل المقطع الصوتي الموجود في عنصر audio
الطفل الخاص به. قصة المستخدم رقم 6: عندما أضغط مفتاح المشغل المرتبط بكل .drum-pad
، يجب تشغيل المقطع الصوتي الموجود في عنصر audio
الطفل الخاص به (على سبيل المثال ، الضغط على المفتاح Q يؤدي إلى تشغيل لوحة الأسطوانة التي تحتوي على السلسلة "Q" ، الضغط على المفتاح W يجب أن يؤدي إلى تشغيل لوحة البراميل التي تحتوي على السلسلة "W" ، وما إلى ذلك). قصة المستخدم رقم 7: عندما يتم تشغيل .drum-pad
يتم عرض سلسلة تصف المقطع الصوتي المرتبط كنص داخلي للعنصر #display
(يجب أن تكون كل سلسلة فريدة). يمكنك بناء مشروعك عن طريق تسجيل قلم CodePen هذا . أو يمكنك استخدام رابط CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
بمجرد الانتهاء ، أرسل عنوان URL إلى عملك مشروع مع كل اختباراتها تمر. تذكر استخدام طريقة Read-Search-Ask إذا واجهتك مشكلة. Instructions
Tests
tests: []
Challenge Seed
Solution
// solution required