4.2 KiB
4.2 KiB
id | title | isRequired | challengeType | videoUrl | localeTitle |
---|---|---|---|---|---|
587d7dbc367417b2b2512bae | Build a Drum Machine | true | 3 | Construir una máquina de tambor |
Description
id="drum-machine"
que contiene todos los demás elementos. Historia de usuario n. ° 2: Dentro de #drum-machine
puedo ver un elemento con el correspondiente id="display"
. Historia de usuario n. ° 3: Dentro de #drum-machine
puedo ver 9 elementos de pad de batería que se pueden hacer clic, cada uno con un nombre de clase de drum-pad
, una identificación única que describe el clip de audio que la almohadilla de batería se configurará para disparar, y un interior Texto que corresponde a una de las siguientes teclas del teclado: Q, W, E, A, S, D, Z, X, C. Los pads de batería DEBEN estar en este orden. Historia de usuario # 4: Dentro de cada .drum-pad
, debe haber un elemento de audio
HTML5 que tenga un atributo src
apunte a un clip de audio, un nombre de clase de clip
y una identificación correspondiente al texto interno de su .drum-pad
primario .drum-pad
(por ejemplo, id="Q"
, id="W"
, id="E"
etc.). Historia de usuario n. ° 5: Cuando hago clic en un elemento .drum-pad
, se debe activar el clip de audio contenido en su elemento de audio
secundario. Historia de usuario n. ° 6: Cuando .drum-pad
la tecla de activación asociada con cada .drum-pad
, el clip de audio contenido en su elemento de audio
secundario debe activarse (por ejemplo, al presionar la tecla Q debe activar la batería que contiene la cadena "Q", presionando la tecla W debería activar el pad de batería que contiene la cuerda "W", etc.). Historia de usuario # 7: cuando se .drum-pad
un .drum-pad
, una cadena que describe el clip de audio asociado se muestra como el texto interno del elemento #display
(cada cadena debe ser única). Puedes construir tu proyecto por medio de este bolígrafo CodePen . O puede usar este enlace CDN para ejecutar las pruebas en el entorno que desee: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Una vez que haya terminado, envíe la URL a su cuenta Proyecto con todas sus pruebas aprobadas. Recuerda usar el método de lectura-búsqueda-pregunta si te atascas. Instructions
Tests
tests: []
Challenge Seed
Solution
// solution required