Build a Drum Machine - Build a Drum Machine

JavaScript
1

Tell us what’s happening:

Hello! Step 9 isn’t passing, despite “the corresponding audio” being played with the key! I thought the problem first was to also update the display P but it still didn’t help! Any help is appreciated!

Your code so far

<!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='nav'>
        <h1>Drum Machine</h1>
        <p>(totally by professionals)</p>
        </div>
      <div id='pad-bank'>
        <button class='drum-pad' id='Heater-1'>
          Q
          <audio src='https://cdn.freecodecamp.org/curriculum/drum/Heater-1.mp3' controls class='clip' id='Q'>

          </audio>
        </button>

        <button class='drum-pad' id='Heater-2'>
          W
          <audio src='https://cdn.freecodecamp.org/curriculum/drum/Heater-2.mp3' controls class='clip' id='W'>

          </audio>
        </button>

        <button class='drum-pad' id='Heater-3'>
          E
          <audio src='https://cdn.freecodecamp.org/curriculum/drum/Heater-3.mp3' controls class='clip' id='E'>

          </audio>
        </button>

        <button class='drum-pad' id='Heater-4'>
          A
          <audio src='https://cdn.freecodecamp.org/curriculum/drum/Heater-4_1.mp3' controls class='clip' id='A'>

          </audio>
        </button>

        <button class='drum-pad' id='Clap'>
          S
          <audio src='https://cdn.freecodecamp.org/curriculum/drum/Heater-6.mp3' controls class='clip' id='S'>

          </audio>
        </button>

        <button class='drum-pad' id='Open-HH'>
          D
          <audio src='https://cdn.freecodecamp.org/curriculum/drum/Dsc_Oh.mp3' controls class='clip' id='D'>

          </audio>
        </button>

        <button class='drum-pad' id='kickNHat'>
          Z
          <audio src='https://cdn.freecodecamp.org/curriculum/drum/Kick_n_Hat.mp3' controls class='clip' id='Z'>

          </audio>
        </button>

        <button class='drum-pad' id='kick'>
          X
          <audio src='https://cdn.freecodecamp.org/curriculum/drum/RP4_KICK_1.mp3' controls class='clip' id='X'>

          </audio>
        </button>

        <button class='drum-pad' id='closed-hh'>
          C
          <audio src='https://cdn.freecodecamp.org/curriculum/drum/Cev_H2.mp3' controls class='clip' id='C'>

          </audio>
        </button>

      </div>
      <p id='display'></p>

    </div>

    <script src='script.js'></script>
  </body>
</html>


audio {
  display: none;
}
* {
  font-family: 'Helvetica'
}
body {
  background-color: hsl(0deg, 0%, 15%)
}
#nav {
  background-color: black;
  padding-bottom: 15px;
  color: white;
}
#nav p {padding-left: 5px; color: hsl(0deg, 80%, 80%)}
h1 {
  padding: 7px 0 0 7px;
  }
#pad-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width:100%;
  aspect-ratio: 1/1;
  margin-top: 3px;
}
#drum-machine {
  background-color: hsl(0deg, 0%, 20%);
  width: 460px;
  height: 578px;
  margin: auto;
}
.drum-pad {
  width: 150px;
  height: 150px;
  color: white;
  background-color: hsl(0deg, 0%, 10%);
  opacity: 30%;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.5s
}
.drum-pad:hover {
  opacity: 100%;
}


const padBank = document.getElementById('pad-bank');
const drumPads = document.querySelectorAll('.drum-pad');
const display = document.getElementById('display')

addEventListener('keydown', (e) => {
  if ('QWEASDZXC'.includes(e.key.toUpperCase())) {
     document.getElementById(e.key.toUpperCase()).play();
     checkLetter(e.key.toUpperCase())
  }
})

function checkLetter(e) {
  switch (e) {
      case 'Q':
        display.innerText = 'Heater 1';
        break;
      case 'W':
        display.innerText = 'Heater 2';
        break;
      case 'E':
        display.innerText = 'Heater 3';
        break;
      case 'A':
        display.innerText = 'Heater 4';
        break;
      case 'S':
        display.innerText = 'Clap';
        break;
      case 'D':
        display.innerText = 'Open-HH';
        break;
      case 'Z':
        display.innerText = "Kick-n'-Hat";
        break;
      case 'X':
        display.innerText = 'Kick';
        break;
      case 'C':
        display.innerText = 'Closed-HH';
        break;
  }
}

for (let pad of drumPads) {
  pad.addEventListener('click', (e) => {
    document.getElementById(pad.innerText).play()
    checkLetter(pad.innerText)
    }
)}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36 Edg/144.0.0.0

Challenge Information:

Build a Drum Machine - Build a Drum Machine

2

Hey there,

Please update the message to include your code. The code was too long to be automatically inserted by the help button.

When you enter a code, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

4

I updated it, srry, I’m used for it to paste the code on its own. Anyways, what do you think is the prob?

5

Try calling addEventListener on document.

1 Like
6

I can’t believe I forgot this! Thank you so much!!