Hi! I need your help for my Drum Machine Project!

1

Hi! I’m doing my third Front-end project so far.
I think I’m missing something to pass 7th test.

My codepen link is here.

I did my

const audioList = [
  {id:'Heater-1', letter: 'Q', keycode: 81, src:"https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"},
  {id:'Heater-2', letter: 'W',  keycode:87, src:"https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3"},
  {id:'Heater-3', letter: 'E', keycode: 69, src:"https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3"},
  {id:'heater-4_1', letter: 'A', keycode: 65, src:"https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3"},
  {id:'Heater-6', letter: 'S', keycode: 83, src :"https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3"},
  {id:'Dsc_Oh', letter: 'D', keycode: 68, src:"https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3"},
  {id:'Kick-n-Hat', letter: 'Z', keycode: 90, src: "https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3"},
  {id:'RP4_KICK_1', letter: 'X', keycode: 88, src:"https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3"},
  {id:'Cev_H2', letter:'C', keycode: 67, src:"https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3"}]

class DrumMachine extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      clickedButton: 'CLICK BUTTON OR PUSH THE KEY'
    }
  }

  render(){
    return(
    <div>
      <div id="display" className="inner-container">
      <h5>{this.state.clickedButton}</h5>
      </div>
      <div>
        {audioList.map(item =>
        <button 
          className='drum-pad'
          id={item.id}
          onClick={function(){
                           const sound = document.getElementById(item.letter)
                           sound.play()
                           this.setState({
                             clickedButton: item.letter
                           })
                           
                         }.bind(this)}
          onKeyPress={function(event){
                           if(event.keyCode === item.keycode){
                           const sound = document.getElementById(item.letter)
                           sound.play()
                           this.setState({
                             clickedButton: item.letter
                           })
                           }
                         }}
         >
          <audio
             className='clip'
             id={item.letter}
             src={item.src}/>
                         
            {item.letter}
                         
         </button>
        )}
      </div>
    </div>
    );
  }
};


ReactDOM.render(<DrumMachine />, document.getElementById('drum-machine'));

and my problem now is

 onKeyPress={function(event){
                           if(event.keyCode === item.keycode){
                           const sound = document.getElementById(item.letter)
                           sound.play()
                           this.setState({
                             clickedButton: item.letter
                           })
                           }
                         }}

here. I don’t know how to make it work.
It would be really lovely if somebody makes me realize what I’m doing wrong now.

Thank you in advance!

2

Hello :slight_smile:!

The problem with how you’re handling the keyPress event is that the buttons are no supposed to trigger/receive this event.

Your document is the one that should handle the keyPress event:

constructor() {
  // Inside your react class constructor
  this.onKeyPress = this.onKeyPress.bind(this);
  document.addEventListener('keypress', this.onKeyPress);
}

onKeyPress(event) {
  // Here you must fire the click event on the pad
}

I hope it helps :slight_smile:.

1 Like
3

Hi @skaparate. Thank you for replying. I have noticed what I have been doing wrong but I didn’t understand what I need to ‘fire the click event on the pad’ onKeyPress method… Could you explain more about it if you have any time ? Thank you again for the great advice.

4

hey @kby906,
So instead of having an anonymous function here you could make a function called something like playSound() then call it from the key press and the click.

So you could have something like this

 onKeyPress(event){
    const key = event.key.toUpperCase()
    this.playSound(key)
  }
  
  playSound(letter){
      const sound = document.getElementById(letter)
      if('QWEASDZXC'.includes(letter)) {
        sound.play()
        this.setState({clickedButton: letter})
       }  
   }

then on your click event onClick={this.playSound.bind(this, item.letter)}

1 Like
5

@biscuitmanz Thank you for kind advice! However I’m still lost how to access the values in map array of the audioList . I 'm still trying to figure out how to use your advice… Ugh, this project is pretty tough for me .

7

@biscuitmanz @skaparate Ooohhh!! I finally passed test!! Thank you guys!!!

2 Likes