Построение барабанной машины
Цель. Создайте приложение CodePen.io , функционально похожее на это: https://codepen.io/freeCodeCamp/full/MJyNMd . Выполните приведенные ниже истории пользователей и получите все тесты для прохождения. Придайте ему свой личный стиль. Вы можете использовать любое сочетание HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux и jQuery для завершения этого проекта. Вы должны использовать фреймворк frontend (например, React), потому что этот раздел посвящен изучению интерфейсных фреймворков. Дополнительные технологии, не перечисленные выше, не рекомендуются, и используются на свой страх и риск. Мы смотрим на поддержку других интерфейсных фреймворков, таких как Angular и Vue, но в настоящее время они не поддерживаются. Мы примем и попытаемся исправить все отчеты о проблемах, которые используют предлагаемый стек технологий для этого проекта. Счастливое кодирование! User Story # 1: Я должен видеть внешний контейнер с соответствующим 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, если вы застряли.