I’m trying to figure out how to remove the styling of a pad after a user releases a key on the keyboard. I have all my drum pad CSS rules posted to get an idea as to how they behave stylistically.
Here is my repo in case you want to interact with the project:
class DrumPad extends React.Component {
constructor(props) {
super(props);
this.playSound = this.playSound.bind(this);
}
componentDidMount() {
window.addEventListener("keydown", (e) => {
var key = e.key.toUpperCase();
if (!['Q', 'W', 'E', 'A', 'S', 'D', 'Z', 'X', 'C'].includes(key)) {
return
}
this.playSound(e, key);
});
}
playSound(event, key=null) {
//assign <audio> element to pad
if (event.type === "keydown") {
var pad = document.getElementById(`${key}`);
pad.parentElement.classList.add("drum-pad-key-active");
} else {
var pad = event.currentTarget.firstElementChild;
}
let display_title = document.querySelector("#display");
if (this.props.power) {
display_title.innerHTML = pad.parentElement.id.replace(/-/g, " ").toUpperCase();
} else {
display_title.innerHTML = "";
}
pad.play(); //plays <audio> element
// `pad.parentElement` is the list item wrapping <audio>
pad.parentElement.addEventListener("keyup", (e) => {
e.currentTarget.classList.remove("drum-pad-key-active");
})
}
CSS
/* default pad colors when on */
@for $i from 1 through 9 {
$color: nth($colors, $i);
.active:nth-of-type(#{$i}) {
background: #{$color};
}
}
/* default pad color when off */
.inactive {
background: lavender;
}
/* mouse event */
.drum-pad:active {
transform: scale(0.995);
box-shadow: inset 0px 0px 10px 6px white;
font-weight: bold;
}
/* keyboard event */
.drum-pad-key-active {
transform: scale(0.995);
box-shadow: inset 0px 0px 10px 6px white;
font-weight: bold;
}