Front End Development Libraries Projects - Build a Drum Machine

Tell us what’s happening:
Describe your issue in detail here.
Hi, I am implementing drum machine code in react-JS.
I intended to fire mousedown and mouseUp events to change the styles of buttons.
My code works fine on PC version but on mobile version mousedown and mouseup events are firing but styles are not getting changed… I am unable to trace the issue… Can any one help me
Your code so far

//JS code
const activeStyle =
  "background-color:orange;height: 77px; margin-top: 13px;box-shadow: none;";
const inactiveStyle =
  "background-color:grey;height: 77px; margin-top: 10px;box-shadow: 3px 3px 5px black;";

const activeStyle2 = {
  backgroundColor: "orange",
  boxShadow: "0 3px orange",
  height: 77,
  marginTop: 13
};

const inactiveStyle2 = {
  backgroundColor: "grey",
  marginTop: 10,
  boxShadow: "3px 3px 5px black"
};

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      pressed: true,
      style: inactiveStyle2
    };
    
   
  }
  
 
  componentDidMount() {
    document.addEventListener("keydown", this.handleKeyPress);
    document.addEventListener("keyup", this.handleKeyUp);
  }
  componentWillUnmount() {
    document.removeEventListener("keydown", this.handleKeyPress);
    document.addEventListener("keyup", this.handleKeyUp);
  }
  render() {
    return (
      <DrumMachine
        handleButtonPress={this.handleButtonPress}
        pressed={this.state.pressed}
        style={this.state.style}
      />
    );
  }
}
const DrumMachine = (props) => {
  const n = 9;
  return (
    <div className="drum-machine">
      <div className="drum-pad">
        {[...Array(n)].map((i, x) => (
          <Pad x={x}/>
        ))}
      </div>
      <div className="drum-side">Hello</div>
    </div>
  );
};

class Pad extends React.Component {
  constructor(props){
    super(props)
    this.state={
      style:inactiveStyle2,
    }
     this.handleMouseDown = this.handleMouseDown.bind(this);
    this.handleMouseUp = this.handleMouseUp.bind(this);
  }
  handleMouseDown() {
    console.log('mouse down fired!')
    this.setState(state=>({
      style:activeStyle2
    }))
  }
  handleMouseUp() {
    console.log('mouse Up fired!')
   this.setState(state=>({
      style:inactiveStyle2
    }))
    
  }

  render(){
    return (
    <button
      className="drum-button-wrap"
      onMouseDown={this.handleMouseDown}
      onMouseUp={this.handleMouseUp}
      style={this.state.style}
      id={this.props.x}
    >C</button>
  );
  }
  
};
ReactDOM.render(<App />, document.getElementById("root"));

//SCSS
body {
  color: white;
  background: #141e30; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #243b55,
    #141e30
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #243b55,
    #141e30
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#root {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.drum-machine {
  outline: 5px solid lightblue;
  position: relative;
  width: 660px;
  text-align: center;
  background-color: lighten(grey, 10%);
  .drum-pad {
    width: 332px;
    height: 272px;
    display: inline-block;
    margin: 20px;
    .drum-button-wrap {
      position: relative;
      float: left;
      width: 100px;
      height: 80px;
      margin-right: 10px;
      border-radius: 5px;
      padding-top: 35px;
      box-sizing: border-box;
      cursor: pointer;
      border:none;
    }
  }
  .drum-side {
    width: 240px;
    height: 80px * 3 + 32;
    display: inline-block;
    margin: 40px 20px 0 10px;
    vertical-align: top;
  }
}

@media screen and (max-width: 650px) {
  .drum-machine {
    transform: scale(0.7);
  }
}

//html

<div id="root"></div>

Your browser information:

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

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

Link to the challenge:

Link to my CodePen:

You can try switching to Pointer Events

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