39 lines
4.0 KiB
Markdown
39 lines
4.0 KiB
Markdown
|
---
|
||
|
|
id: 587d7dbc367417b2b2512bae
|
||
|
|
title: Build a Drum Machine
|
||
|
|
isRequired: true
|
||
|
|
challengeType: 3
|
||
|
|
videoUrl: ''
|
||
|
|
localeTitle: Construa uma máquina de ritmos
|
||
|
|
---
|
||
|
|
|
||
|
|
## Description
|
||
|
|
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/MJyNMd" target="_blank">https://codepen.io/freeCodeCamp/full/MJyNMd</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuário</a> 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! <strong>User Story # 1:</strong> Eu deveria ser capaz de ver um container externo com um <code>id="drum-machine"</code> que contém todos os outros elementos. <strong>User Story # 2:</strong> Dentro de <code>#drum-machine</code> eu posso ver um elemento com um <code>id="display"</code> . <strong>User Story # 3:</strong> Dentro de <code>#drum-machine</code> eu posso ver 9 elementos de drum pad clicáveis, cada um com um nome de classe de <code>drum-pad</code> , 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. <strong>User Story # 4:</strong> Dentro de cada <code>.drum-pad</code> , deve haver um elemento de <code>audio</code> HTML5 que tenha um atributo <code>src</code> apontando para um clipe de áudio, um nome de classe de <code>clip</code> e um id correspondente ao texto interno de seu pai <code>.drum-pad</code> (por exemplo, <code>id="Q"</code> , <code>id="W"</code> , <code>id="E"</code> etc.). <strong>User Story # 5:</strong> Quando clico em um elemento <code>.drum-pad</code> , o clipe de áudio contido em seu elemento de <code>audio</code> filho deve ser acionado. <strong>User Story # 6:</strong> Quando eu pressiono a tecla trigger associada a cada <code>.drum-pad</code> , o clipe de áudio contido em seu elemento filho de <code>audio</code> 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.). <strong>User Story # 7:</strong> Quando um <code>.drum-pad</code> é acionado, uma string descrevendo o clipe de áudio associado é exibida como o texto interno do elemento <code>#display</code> (cada string deve ser única). Você pode criar seu projeto, bifurcando <a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||
|
|
|
||
|
|
## Instructions
|
||
|
|
<section id="instructions">
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Tests
|
||
|
|
<section id='tests'>
|
||
|
|
|
||
|
|
```yml
|
||
|
|
tests: []
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Challenge Seed
|
||
|
|
<section id='challengeSeed'>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
## Solution
|
||
|
|
<section id='solution'>
|
||
|
|
|
||
|
|
```js
|
||
|
|
// solution required
|
||
|
|
```
|
||
|
|
</section>
|