5.7 KiB
5.7 KiB
id | title | isRequired | challengeType | videoUrl | localeTitle |
---|---|---|---|---|---|
587d7dbc367417b2b2512bae | Build a Drum Machine | true | 3 | Построение барабанной машины |
Description
id="drum-machine"
который содержит все остальные элементы. User Story # 2: Внутри #drum-machine
я вижу элемент с соответствующим id="display"
. User Story # 3: В #drum-machine
я могу увидеть 9 кликабельных элементов ударной площадки, каждая из которых имеет имя класса drum-pad
, уникальный идентификатор, который описывает аудиоклип, который будет настроен на ударную площадку для запуска, и внутренний текст, который соответствует одной из следующих клавиш на клавиатуре: Q, W, E, A, S, D, Z, X, C. Барабанные площадки должны быть в этом порядке. User Story # 4: внутри каждого .drum-pad
должен быть audio
элемент HTML5, который имеет атрибут src
указывающий на аудиоклип, имя класса clip
и идентификатор, соответствующий внутреннему тексту его родительского .drum-pad
(например, id="Q"
, id="W"
, id="E"
и т. д.). User Story # 5: Когда я нажимаю элемент .drum-pad
, должен запускаться аудиоклип, содержащийся в его дочернем audio
элементе. User Story # 6: Когда я .drum-pad
клавишу триггера, связанную с каждым .drum-pad
, должен запускаться аудиоклип, содержащийся в его дочернем audio
элементе (например, нажатие клавиши Q должно запускать ударную панель, содержащую строку «Q», нажатие клавиши W должно запускать ударную панель, содержащую строку «W» и т. д.). User Story # 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