freeCodeCamp

4.2 KiB

Raw Blame History

id	title	isRequired	challengeType	videoUrl	localeTitle
587d7dbc367417b2b2512bae	Build a Drum Machine	true	3		Construir una máquina de tambor

Description

Objetivo: crear una aplicación CodePen.io que sea funcionalmente similar a esta: https://codepen.io/freeCodeCamp/full/MJyNMd . Cumple las siguientes historias de usuario y haz que pasen todas las pruebas. Dale tu propio estilo personal. Puede completar cualquier combinación de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux y jQuery para completar este proyecto. Debería usar un marco frontend (como React, por ejemplo) porque esta sección trata sobre el aprendizaje de marcos frontend. No se recomiendan las tecnologías adicionales no enumeradas anteriormente y su uso es bajo su propio riesgo. Estamos considerando la compatibilidad con otros marcos de frontend, como Angular y Vue, pero actualmente no se admiten. Aceptaremos e intentaremos solucionar todos los informes de problemas que utilizan la pila de tecnología sugerida para este proyecto. ¡Feliz codificación! Historia de usuario n. ° 1: Debería poder ver un contenedor externo con un 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

4.2 KiB Raw Blame History