Use individual drum pad key press event listeners to satisfy assessment tests

master
Manish 2 years ago
parent eab504ebc9
commit c573e1d211

@ -36,6 +36,5 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</body>
</html>

@ -33,7 +33,6 @@ class App extends React.Component {
bank: false,
volume: 100,
displayPanelText: "Drum Machine",
latestKeyPressed: undefined,
};
this.updateColors = this.updateColors.bind(this);
this.togglePower = this.togglePower.bind(this);
@ -41,24 +40,9 @@ class App extends React.Component {
this.handleVolumeChange = this.handleVolumeChange.bind(this);
this.toggleBank = this.toggleBank.bind(this);
this.displayDrumPadPress = this.displayDrumPadPress.bind(this);
this.handleKeyPresses = this.handleKeyPresses.bind(this);
this.updateColors();
}
handleKeyPresses(event) {
this.setState({
latestKeyPressed: String(event.key).toUpperCase(),
});
}
componentDidMount() {
document.addEventListener("keydown", this.handleKeyPresses, false);
}
componentWillUnmount() {
document.removeEventListener("keydown", this.handleKeyPresses, false);
}
togglePower() {
this.setState((state) => ({
power: !state.power,
@ -70,7 +54,6 @@ class App extends React.Component {
displayDrumPadPress(note) {
this.setState({
displayPanelText: note,
latestKeyPressed: undefined,
});
}
@ -128,7 +111,6 @@ class App extends React.Component {
drumPadKeys.push(
<DrumPad
drumPadKey={drumPad.key}
isKeyPressed={this.state.latestKeyPressed === drumPad.key}
noteName={this.state.bank ? drumPad.altName : drumPad.name}
audioSrc={this.state.bank ? drumPad.altAudioSrc : drumPad.audioSrc}
power={this.state.power}
@ -207,20 +189,26 @@ class DrumPad extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.handleClick = this.handleClick.bind(this);
this.playSound = this.playSound.bind(this);
this.handleKeyPress = this.handleKeyPress.bind(this);
}
handleKeyPress(event) {
if (String(event.key).toUpperCase() === this.props.drumPadKey) {
this.playSound();
}
}
componentDidMount() {
this.audio = document.getElementById(this.props.drumPadKey);
document.addEventListener("keydown", this.handleKeyPress, false);
}
componentDidUpdate() {
if (this.props.isKeyPressed) {
this.handleClick();
}
componentWillUnmount() {
document.removeEventListener("keydown", this.handleKeyPress, false);
}
handleClick() {
playSound() {
this.props.displayDrumPadPress(this.props.noteName);
this.audio.play();
}
@ -236,7 +224,7 @@ class DrumPad extends React.Component {
paddingBottom: "20%",
fontWeight: "bold",
}}
onClick={this.handleClick}
onClick={this.playSound}
>
{this.props.drumPadKey}
<audio

Loading…
Cancel
Save