Tell us what’s happening:
Hi, all! My Drum Machine project is almost done and all tests are passing except these two:
- Test 5: When I click on a .drum-pad element, the audio clip contained in
<audio>element should be triggered. - Test 7: When a .drum-pad is triggered, a string describing the associated audio clip is displayed as the inner text of the #display element (each string must be unique).
However, my project does working just fine at least from user’s perspective. It plays a sound when specific keyboard keys is pressed and it displays the name of the sound on the screen. I’m not quite sure what is causing these two tests to fail.
Could you take a look at my code and see what’s missing? Thanks.
Your code so far
HTML
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
</head>
<body>
<div id="drum-machine">
<div id='display'></div>
<span id='q' class="drum-pad"><audio id='Q' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'></audio>Q</span>
<span id='w' class="drum-pad"><audio id='W' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3'></audio>W</span>
<span id='e' class="drum-pad"><audio id='E' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3'></audio>E</span>
<span id='a' class="drum-pad"><audio id='A' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3'></audio>A</span>
<span id='s' class="drum-pad"><audio id='S' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3'></audio>S</span>
<span id='d' class="drum-pad"><audio id='D' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3'></audio>D</span>
<span id='z' class="drum-pad"><audio id='Z' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3'></audio>Z</span>
<span id='x' class="drum-pad"><audio id='X' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3'></audio>X</span>
<span id='c' class="drum-pad"><audio id='C' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3'></audio>C</span>
</div>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</body>
JavaScript (jQuery)
// Highlight the key when a keyboard key is pressed
$(document).keypress(function(e) {
var colors = String.fromCharCode(e.which);
$('#'+ colors + '').addClass('yellow');
});
// Remove the highlighted key when a keyboard key is released
$(document).keyup(function() {
$('.drum-pad').removeClass('yellow')
});
// play a sound if selected keys - Q,W,E,A,S,D,Z,X,C - are clicked
// Also, display the name of the sound when selected keys are clicked
$(document).keydown(function(event){
if (event.keyCode == 81) {
$('#Q').get(0).play();
$('#display').html('Heater 1')
}
});
$(document).keydown(function(event){
if (event.keyCode == 87) {
$('#W').get(0).play();
$('#display').html('Heater 2');
}
});
$(document).keydown(function(event){
if (event.keyCode == 69) {
$('#E').get(0).play();
$('#display').html('Heater 3');
}
});
$(document).keydown(function(event){
if (event.keyCode == 65) {
$('#A').get(0).play();
$('#display').html('Heater 4');
}
});
$(document).keydown(function(event){
if (event.keyCode == 83) {
$('#S').get(0).play();
$('#display').html('Clap');
}
});
$(document).keydown(function(event){
if (event.keyCode == 68) {
$('#D').get(0).play();
$('#display').html('Open HH');
}
});
$(document).keydown(function(event){
if (event.keyCode == 90) {
$('#Z').get(0).play();
$('#display').html("Kick n' Hat");
}
});
$(document).keydown(function(event){
if (event.keyCode == 88) {
$('#X').get(0).play();
$('#display').html('Kick');
}
});
$(document).keydown(function(event){
if (event.keyCode == 67) {
$('#C').get(0).play();
$('#display').html('Closed HH');
}
});
CSS
.yellow {
background-color: #ffc400;
}
#display {
margin-bottom: 100px;
border-style: solid;
font-size: 24px;
text-align: center;
padding: 12px;
font-weight: bold;
font-family: sans-serif;
}
span {
font-weight: bold;
font-family: sans-serif;
text-decoration: none;
background-color: #EEEEEE;
color: #333333;
padding: 20px;
margin: 100px 5px 0px 0px;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.190 Safari/537.36.
Challenge: Build a Drum Machine
Link to the challenge:
