Front End Development Libraries Projects - Build a Drum Machine

JavaScript
1

Tell us what’s happening:
I’m working on the Drum machine project for the front end certification.I’m having some issues:
1)the display i can’t get it working.
2)the power button doesnt want to work.
and i have no errors in the console in the editor.
3) when i click on the drum pads no sound comes out.(music)when i check on codepen to see if my code passes the testes for the challenge,it doesnt pass the 5&6 tasks.i tried to do some changes to the code ,to the js file,but i dont seem to fix it.(im not so good with javascript yet maybe i wrote something incorrect or i have to add something else )if someone coud explain in more detail if i have major mistakes thats not working,id be delighted to understand better.thanks in advance.
Your code so far
html:

`<div id="drum-machine">
    <div id="display"></div>
    <div id="audio-clips">
    <div class="drum-pad" id="Heater-1">
      Q
      <audio class="clip" id="Q" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"></audio>
    </div>
    <div class="drum-pad" id="Heater-2">
      W
      <audio class="clip" id="W" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3"></audio>
    </div>
    <div class="drum-pad" id="Heater-3">
      E
      <audio class="clip" id="E" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3"></audio>
    </div>
    <div class="drum-pad" id="Heater-4_1">
      A
      <audio class="clip" id="A" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3"></audio>
    </div>
    <div class="drum-pad" id="Heater-6">
      S
      <audio class="clip" id="S" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3"></audio>
    </div>
    <div class="drum-pad" id="Dsc_Oh">
      D
      <audio class="clip" id="D" src="https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3"></audio>
    </div>
    <div class="drum-pad" id="Kick_n_Hat">
      Z
      <audio class="clip" id="Z" src="https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3"></audio>
    </div>
    <div class="drum-pad" id="RP4_KICK_1">
      X
      <audio class="clip" id="X" src="https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3"></audio>
    </div>
    <div class="drum-pad" id="Cev_H2">
      C
      <audio class="clip" id="C" src="https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3"></audio>
    </div>
    <div  id="power-button" class="power-container">
        <div class="power-switch"></div>
        <span class="power-label">POWER</span>
      </div> 
         
    <div   class="volume-box">
        <span class="volume-down"><i class="material-icons">-</i></span>
        <input type="range" class="volume-range" step="1" value="80" min="0" max="100" oninput="music.volume = this.value/100">
        <span class="volume-up"><i class="material-icons">+</i></span>
    </div>
  </div>
  </div>`

css:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  body {
    background-color: #30249c;
    font-family: Arial, sans-serif;
    width:500px;
    height:500px;
  }
  
  #drum-machine {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: 100px;
    padding: 20px;
  }
  #audio-clips{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: 100px;
    padding: 20px;

  }
  .drum-pad {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 120px;
    margin: 10px;
    border-radius: 50%;
    background-color: #1a0e8d;
    box-shadow: 5px 5px 6px rgba(176, 75, 201, 0.3);
    transition: all 0.1s ease-in-out;
    cursor: pointer;
  }
  
  .drum-pad:hover {
    transform: translateY(-5px);
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
  }
  
  .drum-pad:active {
    transform: translateY(0px);
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
  }
  
  .clip {
    display: none;
  }
  
  .drum-pad:focus {
    outline: none;
  }
  
  #display {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    margin-top: 30px;
    border-radius: 15px;
    background-color: #19b6d1;
    box-shadow: 5px 5px 6px rgba(147, 214, 226, 0.3);
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #333;
  }
  .volume-box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
  }
  
  .volume-box span {
    cursor: pointer;
    font-size: 28px;
    color: #fff;
  }
  
  .volume-range {
    width: 150px;
    height: 3px;
    margin: 0 10px;
    background-color: #3b83c7;
    outline: none;
    border-radius: 10px;
    transition: background-color 0.2s;
  }
  
  .volume-range::-webkit-slider-thumb {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #0e1094;
    cursor: pointer;
  }
  
  .volume-range::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
  }
  
  .volume-up i,
  .volume-down i {
    font-size: 18px;
    vertical-align: middle;
  }
  





  /* Power Button */
.power-container {
    position: relative;
    background-color: rgb(163, 15, 156);
    margin: 20px auto;
    width: 100px;
    height: 30px;
    display: flex;
    border-radius: 7px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  .power-switch {
    position: absolute;
    left: -60px;
    width: 50px;
    height: 30px;
    background-color: #1bd1c8;
    border-radius: 15px;
    transition: all 0.3s ease;
  }
  .power-switch:after {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    width: 26px;
    height: 26px;
    border-radius: 13px;
    background-color: #fff;
    transition: all 0.3s ease;
  }
  .power-container.active .power-switch {
    background-color: #0f0;
  }
  .power-container.active .power-switch:after {
    left: calc(100% - 28px);
    background-color: #000;
  }
  .power-label {
    margin-left: 10px;
    font-size: 20px;
    color: #d81010;
    text-shadow: 1px 1px 1px #000;
  }
    

const audioClips = {
    Q: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3',
    W: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3',
    E: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3',
    A: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3',
    S: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3',
    D: 'https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3',
    Z: 'https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3',
    X: 'https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3',
    C: 'https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3',
  };
 
 

const audioContainer = document.getElementById('audio-clips');
const audioElements = audioContainer.getElementsByTagName('audio');

for (let i = 0; i < audioElements.length; i++) {
  audioElements[i].addEventListener('error', function() {
    console.log('Error loading audio: ' + audioElements[i].src);
  });
}

  // Add click and keydown event listeners to each drum pad
  document.querySelectorAll('.drum-pad').forEach((pad) => {
    pad.addEventListener('click', () => {
      const audio = new Audio(audioClips[pad.id]);
      audio.play();
      updateDisplay(pad.id);
    });
    document.addEventListener('keydown', (event) => {
        if (event.code === `Key${pad.id}`) {
          const audio = new Audio(audioClips[pad.id]);
          audio.play();
          updateDisplay(pad.id);
        }
      });
    });
  

  
  // Update the display to show the name of the audio clip that was triggered
  function updateDisplay(text) {console.log('Display updated with text:', text);
    const display = document.querySelector('#display');
    display.textContent = text;
  }
  // Get references to the drum pads and display
const drumPads = document.querySelectorAll('.drum-pad');
const display = document.getElementById('display');




powerButton.addEventListener('click', function() {
    console.log('Power button clicked!');
    // Toggle class to turn on/off drum machine
    document.body.classList.toggle('power-off');
  });

Your browser information:

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

Challenge: Front End Development Libraries Projects - Build a Drum Machine

Link to the challenge:

2

Post your Codepen.

With the code you have posted, you should be getting an error.

Uncaught ReferenceError: powerButton is not defined

You can not use an Audio constructor. The code must use the <audio> element (the tests depend on it).

4

As I said, you can not use the Audio constructor. You have to use an audio element.

Well, I guess technically you can use the Audio constructor but you would need to add the audio element the constructor returns to the DOM and change all the interactions to use that element in the DOM.

1 Like
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.