4.9 KiB
id, title, challengeType, forumTopicId, dashedName
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| 587d7dbc367417b2b2512bae | Створити драм-машину (ритм-машину) | 3 | 301370 | build-a-drum-machine |
--description--
Завдання: Створити додаток CodePen.io, який функціонально схожий на цей: https://codepen.io/freeCodeCamp/full/MJyNMd.
Нижче заповніть історії користувача та отримайте всі тести для проходження. Надайте їм свій особистий стиль.
Ви можете по-різному поєднувати HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux та jQuery для завершення цього проєкту. Слід використовувати frontend framework (наприклад, React), тому що цей розділ присвячений саме їх вивченню. Додаткові технології, що не перераховані вище, не рекомендовані і використовуються на власний ризик. Ми розглядаємо підтримку інших frontend framework, таких як Angular та Vue, але вони наразі не підтримуються. Ми візьмемо до уваги та спробуємо виправити всі звіти з зазначеними проблемами, пов'язані із запропонованою технологічною базою для виконання цього проєкту. Вдалого програмування!
Історія користувача #1: Я маю бачити зовнішній контейнер з відповідним id="drum-machine", який містить всі інші елементи.
Історія користувача #2: У межах #drum-machine я можу бачити елемент з відповідним id="display".
Історія користувача #3: У межах #drum-machine я бачу 9 клікабельних елементів барабанних педів, кожен з іменем класу drum-pad, унікальним ідентифікатором, що описує звукозапис, який барабанні педи приводить в дію, та внутрішнім текстом, що відповідає одній з наступних клавіш на клавіатурі: Q, W, E, A, S, D, Z, X, C. Барабанні педи ПОВИННІ бути саме в цьому порядку.
Історія користувача #4: У межах кожного .drum-pad має бути елемент HTML5 audio, який має атрибут 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 та натиснувши Save, щоб створити власне перо. Або ви можете використати це посилання CDN для запуску тестів у будь-якому середовищі, яке вам подобається:https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Після того, як закінчите, надішліть URL-адресу до свого робочого проєкту з усіма його тестами.
--solutions--
// solution required