freeCodeCamp

4.1 KiB

Raw Blame History

id	title	isRequired	challengeType	videoUrl	localeTitle
587d7dbc367417b2b2512bae	Build a Drum Machine	true	3		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. Bom divertimento! História de usuário # 1: Eu deveria ser capaz de ver um container externo com um id="drum-machine" que contém todos os outros elementos. História de usuário # 2: Dentro de #drum-machine eu posso ver um elemento com um id="display" . História de usuário # 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. História de usuário # 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.). História de usuário # 5: Quando clico em um elemento .drum-pad , o clipe de áudio contido em seu elemento de audio filho deve ser acionado. História de usuário # 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.). História de usuário # 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

4.1 KiB Raw Blame History