Build a Drum Machine - Build a Drum Machine

JavaScript
1

Tell us what’s happening:

Why I can’t pass test8, who can help to have a look. Thanks a lot.

Your code so far

<!-- file: index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Drum Machine</title>
    <link rel='stylesheet' href='styles.css'>
  </head>
  <body>
    <div id='drum-machine'>
      <div id='pad-bank'>
        <button class='drum-pad'id='q'>Q<audio class='clip' id='Q' src='https://cdn.freecodecamp.org/curriculum/drum/Heater-1.mp3'></button>
        <button class='drum-pad'id='w'>W<audio class='clip' id='W' src='https://cdn.freecodecamp.org/curriculum/drum/Heater-2.mp3'></button>
        <button class='drum-pad'id='e'>E<audio class='clip' id='E' src='https://cdn.freecodecamp.org/curriculum/drum/Heater-3.mp3'></button>
        <button class='drum-pad'id='a'>A<audio class='clip' id='A' src='https://cdn.freecodecamp.org/curriculum/drum/Heater-4_1.mp3'></button>
        <button class='drum-pad'id='s'>S<audio class='clip' id='S' src='https://cdn.freecodecamp.org/curriculum/drum/Heater-6.mp3'></button>
        <button class='drum-pad'id='d'>D<audio class='clip' id='D' src='https://cdn.freecodecamp.org/curriculum/drum/Dsc_Oh.mp3'></button>
        <button class='drum-pad'id='z'>Z<audio class='clip' id='Z' src='https://cdn.freecodecamp.org/curriculum/drum/Kick_n_Hat.mp3'></button>
        <button class='drum-pad'id='x'>X<audio class='clip' id='X' src='https://cdn.freecodecamp.org/curriculum/drum/RP4_KICK_1.mp3'></button>
        <button class='drum-pad'id='c'>C<audio class='clip' id='C' src='https://cdn.freecodecamp.org/curriculum/drum/Cev_H2.mp3'></button>
        </div>
      <p id='display'></p>
    </div>
    <script src='./script.js'></script>
  </body>
</html>

/* file: styles.css */
#drum-machine {
  background-color:rgb(128, 128, 240);
  width: 80%;
  height: 300px;
  text-align: center;
  margin: 0 auto;
  border: 3px solid purple;
}

#pad-bank {
  height: 70%; 
  padding: 10px 10px;
}

.drum-pad {
  width: 60px;
  height: 60px;
  color: rgb(245, 228, 228);
  background-color: green;
  font-size: 20px;
}

#display {
  color: rgb(10, 10, 10);
  text-align: center;
  border: 1px solid rgb(236, 186, 186);
  padding: 2px;
  height: 30px;
  width: 100px;
  margin: 10px auto;
  background-color: rgb(241, 238, 215);
}

/* file: script.js */
const disPlay=document.querySelector('#display')

const mapp = {Q:'Head1',W:'Head2',E:'Head4',A:'Clap',S:'OpenHH',D:'Kick-Hat',Z:'Kick',X:'Head3',C:'CloseHH'}
const allKeys=[...document.querySelectorAll('.drum-pad')]

document.addEventListener('keydown',async(e)=>{
  const selected = allKeys.find(el=>el.innerText === e.code.slice(-1))
    e.preventDefault()
    const selAudio = selected.querySelector('audio')
    try {
      selAudio.currentTime=0
      await selAudio.play()
      disPlay.innerText = mapp[e.code.slice(-1)]
    }catch (err){
      console.log('Error to play',err)
    }
})

allKeys.forEach(el=>{
  el.addEventListener('click',(e)=>{
    const selaudio = el.querySelector('audio')
    selaudio.currentTime=0
    selaudio.play()
    disPlay.innerText = mapp[el.innerText] 
  })
})

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36

Challenge Information:

Build a Drum Machine - Build a Drum Machine

2

Hmm, looks like tests are using only the key attribute when dispatching the event.

It appears that code attribute won’t take to consideration the keyboard layout. It also might not be well supported on mobile - KeyboardEvent: code property - Web APIs | MDN.

1 Like
3

Thanks very much. After I updated the code, passed the test. :+1: