{
    "componentChunkName": "component---src-templates-challenges-projects-frontend-show-tsx",
    "path": "/learn/front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine",
    "result": {"data":{"challengeNode":{"challenge":{"forumTopicId":301370,"title":"Build a Drum Machine","description":"<section id=\"description\">\n<p><strong>Objective:</strong> Build a CodePen app.</p>\n<p>Fulfill the below user stories and get all the tests to pass. Give it your own personal style.</p>\n<p>You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!</p>\n<p><strong>User Story #1:</strong> I should be able to see an outer container with a corresponding <code>id=\"drum-machine\"</code> that contains all other elements.</p>\n<p><strong>User Story #2:</strong> Within <code>#drum-machine</code> I can see an element with a corresponding <code>id=\"display\"</code>.</p>\n<p><strong>User Story #3:</strong> Within <code>#drum-machine</code> I can see 9 clickable drum pad elements, each with a class name of <code>drum-pad</code>, a unique id that describes the audio clip the drum pad will be set up to trigger, and an inner text that corresponds to one of the following keys on the keyboard: <code>Q</code>, <code>W</code>, <code>E</code>, <code>A</code>, <code>S</code>, <code>D</code>, <code>Z</code>, <code>X</code>, <code>C</code>. The drum pads MUST be in this order.</p>\n<p><strong>User Story #4:</strong> Within each <code>.drum-pad</code>, there should be an HTML5 <code>audio</code> element which has a <code>src</code> attribute pointing to an audio clip, a class name of <code>clip</code>, and an id corresponding to the inner text of its parent <code>.drum-pad</code> (e.g. <code>id=\"Q\"</code>, <code>id=\"W\"</code>, <code>id=\"E\"</code> etc.).</p>\n<p><strong>User Story #5:</strong> When I click on a <code>.drum-pad</code> element, the audio clip contained in its child <code>audio</code> element should be triggered.</p>\n<p><strong>User Story #6:</strong> When I press the trigger key associated with each <code>.drum-pad</code>, the audio clip contained in its child <code>audio</code> element should be triggered (e.g. pressing the <code>Q</code> key should trigger the drum pad which contains the string <code>Q</code>, pressing the <code>W</code> key should trigger the drum pad which contains the string <code>W</code>, etc.).</p>\n<p><strong>User Story #7:</strong> When a <code>.drum-pad</code> is triggered, a string describing the associated audio clip is displayed as the inner text of the <code>#display</code> element (each string must be unique).</p>\n<p>Once you're done, submit the URL to your working project with all its tests passing.</p>\n</section>","instructions":null,"challengeType":3,"helpCategory":"JavaScript","superBlock":"front-end-development-libraries","certification":"front-end-development-libraries","block":"front-end-development-libraries-projects","translationPending":false,"fields":{"blockName":"Front End Development Libraries Projects","slug":"/learn/front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine"}}}},"pageContext":{"challengeMeta":{"certification":"front-end-development-libraries","superBlock":"front-end-development-libraries","block":"front-end-development-libraries-projects","template":"","required":[],"nextChallengePath":"/learn/front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator","prevChallengePath":"/learn/front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer","id":"587d7dbc367417b2b2512bae"},"projectPreview":{"showProjectPreview":false,"challengeData":{"challengeType":3,"challengeFiles":[]}},"slug":"/learn/front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine"}},
    "staticQueryHashes": ["3216307819","3851966407"]}