drum-machine

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    
    <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
    
    <title>Drum Machine - FreeCodeCamp Project</title>
  </head>
  <body>
    <div id="app" class="container"></div>

   

    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
  </body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

* {
  box-sizing: border-box;
}

body {
  background-color: #9b59b6;
  font-family: 'Lato', sans-serif;
  margin: 0;
  min-height: 100vh;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.display {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
  width: 400px;
}

.display h1 {
  display: block;
  width: 100%;
  text-align: center;
}

.drum-pad {
  border: 2px solid #333;
  border-radius: 4px;
  background-color: #8e44ad;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  margin: 10px;
  height: 100px;
  width: 100px;
}

.drum-pad.active {
  opacity: 0.8;
  transform: scale(0.95);
}

React

import ReactDOM from 'react-dom';
import React from 'react';
import './App.css';

const sounds = [
  {
    key: 'Q',
    mp3: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3'
  },
  {
    key: 'W',
    mp3: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3'
  },
  {
    key: 'E',
    mp3: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3'
  },
  {
    key: 'A',
    mp3: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3'
  },
  {
    key: 'S',
    mp3: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3'
  },
  {
    key: 'D',
    mp3: 'https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3'
  },
  {
    key: 'Z',
    mp3: 'https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3'
  },
  {
    key: 'X',
    mp3: 'https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3'
  },
  {
    key: 'C',
    mp3: 'https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3'
  },
];

const App = (props) => (
  <div className="display" id="display">
    <h1>Play a sound</h1>
          {sounds.map((sound, index) => (
            <DrumPad text={sound.key} key={index} audio={sound.mp3}/>
          ))}
        </div>
);
  
class DrumPad extends React.Component {
  constructor(props) {
    super(props);

    this.audio = React.createRef();
    }

  componentDidMount() {
    this.audio.current.addEventListener('ended', (e) => {
      const parent = e.target.parentNode;
      parent.classList.remove('active');
    }) 
  }

  playSound = () => {
    this.audio.current.play();
    
    const id = this.audio.current.id;

    const parent = this.audio.current.parentNode;
    parent.classList.add('active');

    const display = parent.parentNode; //the parent here is the drum-pad which is inside the display
    display.querySelector('h1').innerText = `${id} is playing`;
  }

  
  render() {
    const { text, audio } = this.props; 
    return(
      <div id="drum-machine">
        <div className="drum-pad" onClick={this.playSound}...