---
id: 587d7dbc367417b2b2512bae
title: Build a Drum Machine
isRequired: true
challengeType: 3
videoUrl: ''
localeTitle: Construa uma máquina de ritmos
---
## Description
Objetivo: criar um aplicativo CodePen.io que seja funcionalmente semelhante a este: https://codepen.io/freeCodeCamp/full/MJyNMd . Cumpra as histórias de usuário abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar qualquer combinação de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux e jQuery para concluir este projeto. Você deve usar um framework frontend (como o React, por exemplo), porque esta seção é sobre o aprendizado de frameworks frontend. Tecnologias adicionais não listadas acima não são recomendadas e usá-las é por sua conta e risco. Estamos procurando dar suporte a outros frameworks frontend como Angular e Vue, mas eles não são suportados atualmente. Aceitaremos e tentaremos corrigir todos os relatórios de problemas que usam a pilha de tecnologia sugerida para este projeto. Codificação feliz! User Story # 1: Eu deveria ser capaz de ver um container externo com um 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
## Challenge Seed
## Solution
```js
// solution required
```