freeCodeCamp

5.0 KiB

Raw Blame History

id	title	isRequired	challengeType	videoUrl	localeTitle
587d7dbc367417b2b2512bae	Build a Drum Machine	true	3		بناء آلة طبل

Description

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

5.0 KiB Raw Blame History