freeCodeCamp

3.6 KiB

Raw Blame History

id	title	isRequired	challengeType	videoUrl	localeTitle
587d7dbc367417b2b2512bae	Build a Drum Machine	true	3		建立鼓机

Description

目标：构建一个功能类似于此的CodePen.io应用程序： https ： //codepen.io/freeCodeCamp/full/MJyNMd 。完成以下用户故事并通过所有测试。给它你自己的个人风格。您可以使用HTML，JavaScript，CSS，Bootstrap，SASS，React，Redux和jQuery的任意组合来完成此项目。您应该使用前端框架（例如React），因为本节是关于学习前端框架的。不建议使用上面未列出的其他技术，使用它们的风险由您自行承担。我们正在寻求支持其他前端框架，如Angular和Vue，但目前不支持它们。我们将接受并尝试修复所有使用建议的技术堆栈的问题报告。快乐的编码！ 用户故事＃1：我应该能够看到一个带有相应id="drum-machine"的外部容器，其中包含所有其他元素。 用户故事＃2：在#drum-machine我可以看到一个具有相应id="display"的元素。 用户故事＃3：在#drum-machine我可以看到9个可点击的鼓垫元素，每个鼓垫元素都有一个drum-pad的类名，一个唯一的id描述了鼓垫将被设置为触发的音频片段，以及一个内部与键盘上的以下键之一对应的文本：Q，W，E，A，S，D，Z，X，C。鼓垫必须按此顺序排列。 用户故事＃4：在每个.drum-pad ，应该有一个HTML5 audio其具有元件src指向音频剪辑，一个类名称属性clip ，以及对应于其父的内文本的ID .drum-pad （例如id="Q" ， id="W" ， id="E"等）。 用户故事＃5：当我点击.drum-pad元素时，应该触发其子audio元素中包含的音频剪辑。 用户故事＃6：当我按下与每个.drum-pad相关联的触发键时，应触发其子audio元素中包含的音频剪辑（例如，按下Q键应触发包含字符串“Q”的鼓垫，按下W键应触发包含字符串“W”等的鼓垫。 用户故事＃7：当触发.drum-pad ，描述相关音频剪辑的字符串将显示为#display元素的内部文本（每个字符串必须是唯一的）。您可以通过分叉此CodePen笔来构建项目。或者您可以使用此CDN链接在您喜欢的任何环境中运行测试： https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js ： https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js完成后，将URL提交给您的工作通过所有测试的项目。如果卡住，请记住使用Read-Search-Ask方法。

Instructions

Tests

tests: []

Challenge Seed

Solution

// solution required

3.6 KiB Raw Blame History Unescape Escape