Feedback on Drum Machine

Feedback on Drum Machine
0

#1

Tell me what you think code-wise (not much of a designer as you might tell!)


#2

very nice job i really loved the design it’s so smooth and lovely, i’m not that far yet in the curriculum so i can’t judge the code but common it’s working :smile:.


#3

You really don’t need to put the button letters, audio names, or audio urls in state. I was able to create a btns array with all the info need and eliminate a lot of repetitive code and text (the urls) with the following:

class App extends React.Component {
	state = {
		display: ''
	}	

	stealTextName = text => this.setState({display: text})

	render() {
		const btns = [
			['Q','Heater-1'], ['W', 'Heater-2'], ['E', 'Heater-3'],
			['A','Heater-4_1'], ['S', 'Heater-6'], ['D', 'Kick_n_Hat'],
			['Z', 'punchy_kick_1'],	['X', 'side_stick_1'], ['C', 'Brk_Snr']
		];
		
		const convertName = name => name
		  .replace(/_/g,'-')
		  .replace(/\w+/g, ([first, ...rest]) => first.toUpperCase() + rest.join(''));
		
		const {display} = this.state, {stealTextName} = this
		return (
			<div className='container'>
				<div id='drum-machine'>
					<div id='display'>
						<span>{display}</span>
					</div>
					<div id='controls'>
						{btns.map(([letter,audioName]) => (
							<Drumpad
							  id={convertName(audioName)}
							  text={letter}
							  audio={`https://s3.amazonaws.com/freecodecamp/drums/${audioName}.mp3`}
							  stealTextName={stealTextName}
						   />)
						)}
					</div>
				</div>
			</div>
		)
	}
}

#4

I like how simple and clean the app looks, few lines of code, great work