Front End Libraries Projects - Build a Drum Machine

front-end-libraries-projects-build-a-drum-machine.markdown

Front End Libraries Projects - Build a Drum Machine

A Pen by Yasaminyld on CodePen.

License.

index.haml

<div id="body"></div>

script.babel

class DrumMachine extends React.Component {
  constructor(props) {
    super(props)
    this.state = { 
      name: 'Press a key!',
      keyData : [
  {
    id: "Q",
    name: "Heater-1",
    src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"
  },
  {
    id: "W",
    name: "Heater-2",
    src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3"
  },
  {
    id: "E",
    name: "Heater-3",
    src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3"
  },
  {
    id: "A",
    name: "Chord_1",
    src: "https://s3.amazonaws.com/freecodecamp/drums/Chord_1.mp3"
  },
  {
    id: "S",
    name: "Chord_2",
    src: "https://s3.amazonaws.com/freecodecamp/drums/Chord_2.mp3"
  },
  {
    id: "D",
    name: "Chord_3",
    src: "https://s3.amazonaws.com/freecodecamp/drums/Chord_3.mp3"
  },
  {
    id: "Z",
    name: "Dsc_Oh",
    src: "https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3"
  },
  {
    id: "X",
    name: "Kick_n_Hat",
    src: "https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3"
  },
  {
    id: "C",
    name: "Give_us_a_light",
    src: "https://s3.amazonaws.com/freecodecamp/drums/Give_us_a_light.mp3"
  }
]
    }
    
    this.handleClick = this.handleClick.bind(this)
    this.handlePress = this.handlePress.bind(this)
  }
  
  handleClick(key) {
    
    this.setState({
      name: this.state.keyData.find((item) => item.id == key).name
    })
     document.getElementById(key).play()
  }
  
  handlePress(e) {
    
    this.setState({
      name: this.state.keyData.find((item) => item.id == e.key.toUpperCase()).name
    })
     document.getElementById(e.key.toUpperCase()).play()
  }
  
  render() {
    return (
      <main id="drum-machine" onKeyDown={(e) => this.handlePress(e)} tabIndex="0">
        <Display name={this.state.name} />
        <Keys click={this.handleClick} keyData={this.state.keyData}/>
      </main>
    )
  }
}

const Display = (props) => {
  return <div id="display">{props.name}</div>
}

const Keys = (props) => {
  
  return (
    <div id="keys">
      {props.keyData.map((key, i) => {
        return (
          <a href="#" className="drum-pad" id={key.name} key={i} onClick={() => props.click(key.id)}>
          <div>{key.id}
            <audio src={key.src} class="clip" id={key.id}>
            </audio>
          </div>
        </a>
        )
      })}
  </div>
  )
}

document.getElementById("body").focus()

ReactDOM.render(<DrumMachine />, document.getElementById("body"))

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.1/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/6.0.0/react-redux.min.js"></script>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

style.scss

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');

html {
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  background-color: #89c4f4;
  font-family: 'Josefin Sans', sans-serif;
}

* {
  outline: none;
}

#body {
  width: 100%;
  height: 100%;
}

main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

#keys {
  width: 450px;
  height: 450px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 5px 5px;
}

.drum-pad {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #4d13d1;
  border: 2px solid #4d13d1;
  border-radius: 5px;
  color: #89c4f4;
  font-size: 40px;
}

a {
  text-decoration: none;
}

#display {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-basis: 100px;
  color: #4d13d1;
  font-size: 30px;
}