2018-10-10 18:03:03 -04:00
---
id: 587d7dbc367417b2b2512bae
challengeType: 3
2020-09-07 16:15:49 +08:00
forumTopicId: 301370
2020-10-01 17:54:21 +02:00
title: 构建一台鼓式机器
2018-10-10 18:03:03 -04:00
---
## Description
2020-09-07 16:15:49 +08:00
< section id = 'description' >
< strong > 目标：< / strong > 在 < a href = 'https://codepen.io' target = '_blank' > CodePen.io< / a > 上实现一个功能类似 < a href = 'https://codepen.io/freeCodeCamp/full/MJyNMd' target = '_blank' > https://codepen.io/freeCodeCamp/full/MJyNMd< / a > 的 App。
在满足以下< a href = 'https://en.wikipedia.org/wiki/User_story' target = '_blank' > 需求< / a > 并能通过所有测试的前提下，你可以根据自己的喜好来美化你的 app。
你可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 来完成这个挑战。但鉴于这个章节的学习内容与前端框架相关，推荐使用一款前端框架（比如 React） ； ， ， ， ！
< strong > 需求 1： < / strong > 我应该可以看到一个具有< code > id="drum-machine"< / code > 属性的外层容器，该容器包含了其他所有元素。
< strong > 需求 2： </ strong > 在具有< code > #drum -machine</ code > 属性的元素内，我应该能看到一个具有 < code > id="display"</ code > 属性的元素。
< strong > 需求 3： </ strong > 在具有< code > #drum -machine</ code > 属性的元素内，我应该能看到 9 个可以点击的鼓垫元素，且每个鼓垫元素都应该有一个值为< code > drum-pad</ code > 的 class 属性。一个用于描述触发鼓垫音频片段的特殊 id， ：
< strong > 需求 4： < / strong > 在每一个具有< code > .drum-pad< / code > 属性的元素内，应该有一个具有指向音频片段地址的< code > src< / code > 属性的 HTML5< code > audio< / code > 元素，一个值为< code > clip< / code > 的 class 属性，以及一个 id 属性，它的值应该是其父元素< code > .drum-pad< / code > 的文本内容（例如< code > id="Q"< / code > 、< code > id="W"< / code > 、< code > id="E"< / code > 等等）。
< strong > 需求 5： < / strong > 当我点击一个具有< code > .drum-pad< / code > 属性的元素时，应该触发它的子元素< code > audio< / code > 包含的音频片段。
< strong > 需求 6： < / strong > 当我按下每一个< code > .drum-pad< / code > 元素的关联键时，应该触发其子元素< code > audio< / code > 包含的音频片段（例如：按下 Q 键应该触发包含字符串 "Q" 的鼓垫，按下 W 键应该触发包含字符串 "W" 的鼓垫等等）。
< strong > 需求 7： </ strong > 当触发一个具有< code > .drum-pad</ code > 属性的元素时，< code > #display </ code > 元素内应该展示这个触发元素关联音频片段的描述字符串（每一个字符串都应该是独一无二的）。
你可以 fork < a href = 'http://codepen.io/freeCodeCamp/pen/MJjpwO' target = '_blank' > 这个 CodePen pen 项目< / a > 来构建你的项目。或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：< code > https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js< / code > 。
一旦你完成了本项目并且该项目所有测试运行通过，请提交项目的 URL。
< / section >
2018-10-10 18:03:03 -04:00
## Instructions
2020-09-07 16:15:49 +08:00
< section id = 'instructions' >
2018-10-10 18:03:03 -04:00
< / section >
## Tests
< section id = 'tests' >
```yml
tests: []
```
< / section >
## Challenge Seed
< section id = 'challengeSeed' >
< / section >
## Solution
< section id = 'solution' >
```js
// solution required
```
2020-08-13 17:24:35 +02:00
2020-09-07 16:15:49 +08:00
< / section >
