Drum Machine Boostrap

#1

Hello, im almost done with this project but when i entered the phase of styling the whole project i found myself stuck


<html>
<head>
  <meta charset="utf-8"/>
  <title>Drum Machine</title>
</head>
<body>
	<div>
	<link rel="stylesheet" type="text/css" href="./index.css">
 	<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
	</div>

  <div id="App" class=""></div>

  <script type="text/babel">
const bankOne = [{
    keyCode: 81,
    keyTrigger: 'Q',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'
  }, {
    keyCode: 87,
    keyTrigger: 'W',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3'
  }, {
    keyCode: 69,
    keyTrigger: 'E',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3'
  }, {
    keyCode: 65,
    keyTrigger: 'A',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3'
  }, {
    keyCode: 83,
    keyTrigger: 'S',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3'
  }, {
    keyCode: 68,
    keyTrigger: 'D',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3'
  }, {
    keyCode: 90,
    keyTrigger: 'Z',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3'
  }, {
    keyCode: 88,
    keyTrigger: 'X',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3'
  }, {
    keyCode: 67,
    keyTrigger: 'C',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3'
  },
];





class DrumPad extends React.Component {
	constructor(props){
		super(props);
		this.state = {

		}
	this.handleClick = this.handleClick.bind(this);
	this.handleKeyPress = this.handleKeyPress.bind(this);

	}

	componentDidMount() {
    document.addEventListener('keydown', this.handleKeyPress);
  }
  componentWillUnmount() {
    document.removeEventListener('keydown', this.handleKeyPress);
  }
  handleKeyPress(e) {
    if (e.keyCode === this.props.keyCode) {
      this.handleClick()
    }
}
	handleClick(){
		const audio = new Audio(this.props.clip);
		audio.volume = this.props.volume
		audio.play(); 
	}

render() {
	return (
		<div className="">
		<button className="bg-success rounded-lg drum" onClick={this.handleClick} type="">{this.props.keyTrigger}</button>
		</div>
		)

}



}





class ControlDrum extends React.Component {
	constructor(props){
		super(props);
		this.state = {}
	}



	render() {



	let padBank;
    padBank = this.props.bank.map((drumObj, i, padBankArr) => {
        return (
          <DrumPad 				
						clip={padBankArr[i].url}
						keyTrigger={padBankArr[i].keyTrigger}
						keyCode={padBankArr[i].keyCode}
						volume={this.props.volume}

						 />
						
        		)})  		
	
	return (
		<div >

		{padBank}
		</div>
		
		)
	}
}




		 
	
		class App extends React.Component {
			 constructor(props) {
			    super(props);
			    this.state = {
			    	bank : bankOne,
			    	volume: 1,
								}
	
			this.volumenSet = this.volumenSet.bind(this);
		}
			handleClick(){ 
				const audio = new Audio(bankOne[5].url);
				 audio.play(); 

				}
				
			volumenSet(e){
				this.setState({
					volume :e.target.value
				});
				
			}

		  render()
		 {
				  return (
				  <div className="container">
				  	<div className="col-sm-10 " id="control">


		           				<div className="row justify-content-center align-content-center pt-5">
		           				<input type="range" min="0" max="1" step="0.01" onChange={this.volumenSet}/>
		           					
		           				</div>
		           				<div className="row justify-content-center align-content-center pt-5">
		           					

		           					<ControlDrum
		           					volume={this.state.volume}	           				
		           					bank={this.state.bank}
		           						/>

		           				</div>
		           				

				  	</div>
				  	</div>
		  	) 
		    		 };
		}


		ReactDOM.render(<App/>, document.getElementById("App"));
  </script>
</body>
</html>

in the ControlDrum component, when i render. I use the {} notation to render a list of react components (aka drum buttons), how can i set up boostrap col- to each component of the list?

i know the easiest solution whould be access each component and giving it a class …

something like this

<div className="something1">{comp[1]}</div>
<div className="something2">{comp[2]}</div>
<div className="something3">{comp[3]}</div>

but is highly ineficient, there is any other way to do this?

#2

@bigclown, it would be easier for those wanting to help you if you posted a link to your code in codepen, repl.it or jsfiddle.

#3

Yes @Roma, thanks for the advice.

Here is the code pen link: Code Pen

#4

Are you looking to have all of the buttons in a row?
Currently you have:

  render() {
    return (
      <div className="">
        <button
          className="bg-success rounded-lg drum"
          onClick={this.handleClick}
          type=""
        >
          {this.props.keyTrigger}
        </button>
      </div>
    );

Within your DrumPad component. If you just remove the <div className=""> and it’s appropriate closing tag, all of the buttons are on the same row. So the return method would look like:

  render() {
    return (
        <button
          className="bg-success rounded-lg drum"
          onClick={this.handleClick}
          type=""
        >
          {this.props.keyTrigger}
        </button>
    );

I think that this is the look you are going for instead of adding a className of col to all of the elements.

You can always use

    return (
        <button
          className="bg-success rounded-lg drum col"
          onClick={this.handleClick}
          type=""
        >
          {this.props.keyTrigger}
        </button>
    );

This is adding the col to the button and lets your button fill the width of the container.

Play around with both of those and let me know if either one of those is what you are looking for!

#5