4.0 KiB
4.0 KiB
id | title | isRequired | challengeType | videoUrl | localeTitle |
---|---|---|---|---|---|
587d7dbc367417b2b2512bae | Build a Drum Machine | true | 3 | Construa uma máquina de ritmos |
Description
id="drum-machine"
que contém todos os outros elementos. User Story # 2: Dentro de #drum-machine
eu posso ver um elemento com um id="display"
. User Story # 3: Dentro de #drum-machine
eu posso ver 9 elementos de drum pad clicáveis, cada um com um nome de classe de drum-pad
, um id único que descreve o clipe de áudio que o drum pad será configurado para acionar e um inner texto que corresponde a uma das seguintes teclas no teclado: Q, W, E, A, S, D, Z, X, C. Os pads de bateria DEVEM estar nesta ordem. User Story # 4: Dentro de cada .drum-pad
, deve haver um elemento de audio
HTML5 que tenha um atributo src
apontando para um clipe de áudio, um nome de classe de clip
e um id correspondente ao texto interno de seu pai .drum-pad
(por exemplo, id="Q"
, id="W"
, id="E"
etc.). User Story # 5: Quando clico em um elemento .drum-pad
, o clipe de áudio contido em seu elemento de audio
filho deve ser acionado. User Story # 6: Quando eu pressiono a tecla trigger associada a cada .drum-pad
, o clipe de áudio contido em seu elemento filho de audio
deve ser acionado (por exemplo, pressionar a tecla Q deve acionar o bloco de percussão que contém a string "Q" pressionar a tecla W deve acionar o bloco de percussão que contém a string "W", etc.). User Story # 7: Quando um .drum-pad
é acionado, uma string descrevendo o clipe de áudio associado é exibida como o texto interno do elemento #display
(cada string deve ser única). Você pode criar seu projeto, bifurcando essa caneta CodePen . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método Read-Search-Ask se você ficar preso. Instructions
Tests
tests: []
Challenge Seed
Solution
// solution required