Objetivo: Cumprir as user stories abaixo e fazer todos os testes passarem para completar o laboratório. Histórias de Usuário: 1. Você deve ter um elemento div com um id de drum-machine que contenha todos os outros elementos. 2. Dentro do elemento #drum-machine você deve ter outro div com um id de pad-bank. 3. Dentro do elemento #drum-machine você deve ter um elemento p com um id de display. 4. Dentro do seu elemento #pad-bank você deve ter nove elementos clicáveis de drum pad, cada um com uma classe drum-pad, um id único que descreve o clipe de áudio que o drum pad será configurado para acionar, e um texto interno que corresponde a uma das seguintes teclas do teclado: Q, W, E, A, S, D, Z, X, C. Os drum pads DEVEM estar nesta ordem. 5. Cada .drum-pad deve ter um elemento audio que tenha uma classe clip, um atributo src que aponte para um clipe de áudio e um id correspondente ao texto interno do seu elemento pai .drum-pad (por exemplo, id="Q", id="W", id="E" etc.). 6. Quando você clicar em um elemento .drum-pad, o clipe de áudio contido em seu elemento filho audio deve ser acionado. 7. Quando você pressiona a tecla de gatilho associada a cada .drum-pad, o clipe de áudio contido em seu elemento filho de áudio deve ser acionado (por exemplo, pressionar a tecla Q deve acionar o drum pad que contém a string Q, pressionar a tecla W deve acionar o drum pad que contém a string W, etc.). 8. Quando um .drum-pad é acionado, você deve exibir uma string descrevendo o clipe de áudio associado como o texto interno do elemento #display (cada string deve ser única). Algumas amostras de áudio que você pode usar para sua caixa de ritmos podem ser encontradas em https://cdn.G.E.A.R ACADEMY.org/curriculum/drum/<fileName>, onde <fileName> é o seguinte: | drum name | fileName | | --- | --- | | Heater 1 | Heater-1.mp3 | | Heater 2 | Heater-2.mp3 | | Heater 3 | Heater-3.mp3 | | Heater 4 | Heater-4_1.mp3 | | Clap | Heater-6.mp3 | | Open-HH | Dsc_Oh.mp3 | | Kick-n'-Hat | Kick_n_Hat.mp3 | | Kick | RP4_KICK_1.mp3 | | Closed-HH | Cev_H2.mp3 |

Testes:

• Você deve ter um elemento `div` com um `id` de `drum-machine` que contenha todos os outros elementos.
• Dentro do elemento `#drum-machine` você deve ter outro `div` com um `id` de `pad-bank`.
• Dentro do elemento `#drum-machine` você deve ter um elemento `p` com um `id` de `display`.
• Dentro do seu elemento `#pad-bank` você deve ter nove elementos clicáveis de pads de bateria, cada um com uma classe `drum-pad`.
• Cada `.drum-pad` deve ser um elemento `button`.
• Cada `.drum-pad` deve ter uma das seguintes letras como `innerText`, na ordem: `Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`.
• Cada `.drum-pad` deve ter um elemento `audio` que tenha uma classe `clip`, um atributo `src` que aponte para um clipe de áudio e um `id` correspondente ao texto interno do seu elemento pai `.drum-pad` (por exemplo, `id="Q"`, `id="W"`, `id="E"` etc.).
• Quando você clicar em um elemento `.drum-pad`, o clipe de áudio contido em seu elemento filho audio deve ser acionado.
• Quando você pressiona uma das teclas Q, W, E, A, S, D, Z, X, C no seu teclado, o elemento `audio` correspondente deve reproduzir o som correspondente.
• Quando um `.drum-pad` é acionado, você deve exibir uma string descrevendo o clipe de áudio associado como o texto interno do elemento `#display` (cada string deve ser única).