<sectionid="description"><strong>Objetivo:</strong> crear una aplicación <ahref="https://codepen.io"target="_blank">CodePen.io</a> que sea funcionalmente similar a esta: <ahref="https://codepen.io/freeCodeCamp/full/MJyNMd"target="_blank">https://codepen.io/freeCodeCamp/full/MJyNMd</a> . Cumple las siguientes <ahref="https://en.wikipedia.org/wiki/User_story"target="_blank">historias de usuario</a> 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! <strong>Historia de usuario n. ° 1:</strong> Debería poder ver un contenedor externo con un <code>id="drum-machine"</code> que contiene todos los demás elementos. <strong>Historia de usuario n. ° 2:</strong> Dentro de <code>#drum-machine</code> puedo ver un elemento con el correspondiente <code>id="display"</code> . <strong>Historia de usuario n. ° 3:</strong> Dentro de <code>#drum-machine</code> puedo ver 9 elementos de pad de batería que se pueden hacer clic, cada uno con un nombre de clase de <code>drum-pad</code> , 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. <strong>Historia de usuario # 4:</strong> Dentro de cada <code>.drum-pad</code> , debe haber un elemento de <code>audio</code> HTML5 que tenga un atributo <code>src</code> apunte a un clip de audio, un nombre de clase de <code>clip</code> y una identificación correspondiente al texto interno de su <code>.drum-pad</code> primario <code>.drum-pad</code> (por ejemplo, <code>id="Q"</code> , <code>id="W"</code> , <code>id="E"</code> etc.). <strong>Historia de usuario n. ° 5:</strong> Cuando hago clic en un elemento <code>.drum-pad</code> , se debe activar el clip de audio contenido en su elemento de <code>audio</code> secundario. <strong>Historia de usuario n. ° 6:</strong> Cuando <code>.drum-pad</code> la tecla de activación asociada con cada <code>.drum-pad</code> , el clip de audio contenido en su elemento de <code>audio</code> 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.). <strong>Historia de usuario # 7:</strong> cuando se <code>.drum-pad</code> un <code>.drum-pad</code> , una cadena que describe el clip de audio asociado se muestra como el texto interno del elemento <code>#display</code> (cada cadena debe ser única). Puedes construir tu proyecto por medio de <ahref="http://codepen.io/freeCodeCamp/pen/MJjpwO"target="_blank">este bolígrafo CodePen</a> . O puede usar este enlace CDN para ejecutar las pruebas en el entorno que desee: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Una vez que haya terminado, envíe la URL a su cuenta Proyecto con todas sus pruebas aprobadas. Recuerda usar el método de <ahref="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514"target="_blank">lectura-búsqueda-pregunta</a> si te atascas. </section>
