css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<div id="root"></div>
            
          
!
            
              /*Fancy toggle button made by http://nathan.tokyo in this pen: https://codepen.io/nathantaylor/pen/jyVeYp */
/*Metalic buttons from https://codepen.io/simurai/pen/DwJdq */

@import url("https://fonts.googleapis.com/css?family=Knewave");

$car: auto;
$knee: "Knewave";
$trans1: all 1500ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
$trans2: all 500ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
$switchShadow: -0.05rem -0.05rem 0.08rem rgba(0, 0, 51, 0.6),
  0.05rem 0.05rem 0.1rem #b6fbe4, inset 0.5rem 0.5rem 2rem rgba(0, 0, 51, 0.5),
  inset 0.1rem 0.1rem 0.2rem rgba(0, 0, 51, 0.75),
  inset -0.5rem -0.5rem 4rem rgba(182, 251, 228, 0.5);

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

$trans3d: translate3d(-50%, -50%, 0);
$rib: inset -0.02rem -0.03rem 0.08rem rgba(0, 0, 51, 0.5),
  inset 0.03rem 0.03rem 0.1rem #b6fbe4,
  inset -0.02rem -0.03rem 0.2rem rgba(0, 0, 51, 0.3),
  inset 0.03rem 0.03rem 0.2rem rgba(182, 251, 228, 0.8),
  0.05rem 0.08rem 0.3rem rgba(0, 0, 51, 0.3),
  -0.05rem -0.08rem 0.4rem rgba(182, 251, 228, 0.3),
  0rem 0rem 0.2rem rgba(46, 66, 107, 0.2);

$half: translate(-50%, -50%);
$repGrad: 50% 50%, 100% 100%;
$wsmoke: whitesmoke;
$txtAlign: center;
$cursor: pointer;

body {
  font-family: "Palatino Linotype", sans-serif;
  background-color: #e6e6e6;
}

#drum-machine {
  border: silver;
  border-radius: 0.25rem;
  box-shadow: 20px 20px 50px grey;
}

.cent {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  -webkit-transform: $half !important;
  @include transform($half);
}

.grid-container {
  width: 50vw;
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: $car $car $car $car $car;
  grid-gap: 10px;
  background-color: $wsmoke;
  padding: 10px;
}

.grid-container > div,
.grid-container > button {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: $txtAlign;
  padding: 20px 0;
  font-size: 30px;
  max-height: 100vh;
}

button:focus {
  outline: 0;
}

#display {
  font-family: $knee !important;
  font-size: 1.5em !important;
  color: $wsmoke;
}

.vol1 {
  font-family: $knee !important;
  font-weight: normal !important;
  color: #5cb85c;
  transition: $trans1;
  -moz-transition: $trans1;
  -webkit-transition: $trans1;
}

.vol2 {
  font-family: $knee !important;
  font-weight: normal !important;
  color: #f0ad4e;
  transition: $trans1;
  -moz-transition: $trans1;
  -webkit-transition: $trans1;
}

.vol3 {
  font-family: $knee !important;
  font-weight: normal !important;
  color: #d9534f;
  transition: $trans1;
  -moz-transition: $trans1;
  -webkit-transition: $trans1;
}

.item1 {
  grid-column: 1 / 4;
  height: 80px !important;
  line-height: 40px !important;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  color: #5bc0de;
  text-stroke-width: 1px;
  text-stroke-color: gray;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: gray;
}

.drum-pad {
  background-color: #f0ad4e !important;
}

.item2 {
  grid-column: 2 / 3;
  font-size: 20px !important;
  height: 60px !important;
  padding-top: 0px !important;
  line-height: 25px !important;
  background-color: $wsmoke !important;
  margin-left: $car;
  margin-right: $car;
}

.slider {
  margin-top: 15px;
  -webkit-appearance: none;
  width: 100%;
  height: 20px;
  background: #d3d3d3;
  outline: none;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 35px;
  height: 25px;
  background: #5cb85c;
  border: 1px dashed #4cae4c;
  cursor: $cursor;
  border-radius: 13px;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 20px;
  background: #5cb85c;
  border: 1px dashed #4cae4c;
  cursor: $cursor;
  border-radius: 13px;
}

.item3 {
  text-align: $txtAlign !important;
  height: 60px;
  background-color: $wsmoke !important;
  border-radius: 0.25rem;
}

.switchOn,
.switchOff {
  width: 50%;
  height: 100%;
  font-size: 20px;
  line-height: 50px;
  transition: $trans2;
  -webkit-transition: $trans2;
}

.switchOn {
  background-color: #a6d8a6;
  color: #5bc0de;
}

.switchOff {
  background-color: #d9534f;
  color: #f0ad4e;
  float: right;
}

@media only screen and (max-width: 768px) {
  .grid-container {
    width: 100vw !important;
  }

  .grid-container > div:not(.item2) {
    font-size: 100% !important;
  }

  .item2 {
    font-size: 1em !important;
  }
}

@media only screen and (max-width: 560px) {
  .item2 {
    font-size: 0.8em !important;
  }
}

#switch {
  top: -10px;
  margin-left: $car;
  margin-right: $car;
  outline: none;
  display: block;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  width: 6rem;
  height: 2rem;
  background: #2e426b;
  border-radius: 2rem;
  -webkit-filter: blur(0.4px);
  filter: blur(0.4px);
  box-shadow: $switchShadow;
}

.wrap {
  top: -10px;
  margin-left: $car;
  margin-right: $car;
  display: block;
  position: relative;
  width: 6rem;
  height: 2rem;
  border-radius: 2rem;
  overflow: hidden;
  z-index: 1;
  -webkit-transform: translateY(-100%);
  @include transform(translateY(-100%));
}

label {
  cursor: $cursor !important;
  display: block;
  position: absolute;
  top: 50%;
  left: 0.1rem;
  width: 4rem;
  height: 1.8rem;
  background: #abbaba;
  border-radius: 2rem;
  -webkit-transform: translate3d(0%, -50%, 0);

  @include transform(translate3d(0%, -50%, 0));

  transition: transform 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53),
    -webkit-transform 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
  -webkit-filter: blur(0.4px);
  filter: blur(0.4px);
  box-shadow: inset -0.05rem -0.05rem 0.08rem rgba(0, 0, 51, 0.6),
    inset 0.05rem 0.05rem 0.1rem #b6fbe4, 0.5rem 0.5rem 2rem rgba(0, 0, 51, 0.5),
    0.1rem 0.1rem 0.2rem rgba(0, 0, 51, 0.75);
}

#switch:checked + div label {
  -webkit-transform: translate3d(1.85rem, -50%, 0);
  @include transform(translate3d(1.85rem, -50%, 0));
}

.rib {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.35rem;
  height: 1.2rem;
  border-radius: 1rem;
  background: #abbaba;
  opacity: 1;
  -webkit-transform: $trans3d;
  @include transform($trans3d);
  box-shadow: $rib;
}

.rib:nth-child(1) {
  left: 35%;
}

.rib:nth-child(3) {
  left: 65%;
}

.sig {
  position: fixed;
  bottom: 8px;
  right: 8px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 100;
  font-family: sans-serif;
  color: rgba(0, 0, 0, 0.4);
  letter-spacing: 2px;
}

.metal {
  cursor: $cursor;
  position: relative;
  outline: none;
  text-align: $txtAlign;
  color: hsla(0, 0%, 20%, 1);
  text-shadow: hsla(0, 0%, 40%, 0.5) 0 -1px 0, hsla(0, 0%, 100%, 0.6) 0 2px 1px;
  background-color: hsl(0, 0%, 90%);
  box-shadow: inset hsla(0, 0%, 15%, 1) 0 0px 0px 4px,
    inset hsla(0, 0%, 15%, 0.8) 0 -1px 5px 4px,
    inset hsla(0, 0%, 0%, 0.25) 0 -1px 0px 7px,
    inset hsla(0, 0%, 100%, 0.7) 0 2px 1px 7px,
    hsla(0, 0%, 0%, 0.15) 0 -5px 6px 4px, hsla(0, 0%, 100%, 0.5) 0 5px 6px 4px; /* outer HL */
  transition: color 0.2s;
}

/* Radial ------------------------- */
.radial.metal {
  border-radius: 80px;
  background-image: -webkit-radial-gradient(
      50% 0%,
      8% 50%,
      hsla(0, 0%, 100%, 0.5) 0%,
      hsla(0, 0%, 100%, 0) 100%
    ),
    -webkit-radial-gradient(50% 100%, 12% 50%, hsla(0, 0%, 100%, 0.6) 0%, hsla(
            0,
            0%,
            100%,
            0
          )
          100%),
    -webkit-radial-gradient(0% 50%, 50% 7%, hsla(0, 0%, 100%, 0.5) 0%, hsla(
            0,
            0%,
            100%,
            0
          )
          100%),
    -webkit-radial-gradient(100% 50%, 50% 5%, hsla(0, 0%, 100%, 0.5) 0%, hsla(
            0,
            0%,
            100%,
            0
          )
          100%),
    -webkit-repeating-radial-gradient($repGrad, hsla(0, 0%, 0%, 0) 0%, hsla(
            0,
            0%,
            0%,
            0
          )
          3%, hsla(0, 0%, 0%, 0.1) 3.5%),
    -webkit-repeating-radial-gradient($repGrad, hsla(0, 0%, 100%, 0) 0%, hsla(
            0,
            0%,
            100%,
            0
          )
          6%, hsla(0, 0%, 100%, 0.1) 7.5%),
    -webkit-repeating-radial-gradient($repGrad, hsla(0, 0%, 100%, 0) 0%, hsla(
            0,
            0%,
            100%,
            0
          )
          1.2%, hsla(0, 0%, 100%, 0.2) 2.2%),
    -webkit-radial-gradient(50% 50%, 200% 50%, hsla(0, 0%, 90%, 1) 5%, hsla(
            0,
            0%,
            85%,
            1
          )
          30%, hsla(0, 0%, 60%, 1) 100%);
}

.metal.radial:before,
.metal.radial:after {
  content: "";
  top: 0;
  left: 0;
  position: absolute;
  border-radius: inherit;
  /* fake conical gradients */
  background-image: -webkit-radial-gradient(
      50% 0%,
      10% 50%,
      hsla(0, 0%, 0%, 0.1) 0%,
      hsla(0, 0%, 0%, 0) 100%
    ),
    -webkit-radial-gradient(50% 100%, 10% 50%, hsla(0, 0%, 0%, 0.1) 0%, hsla(
            0,
            0%,
            0%,
            0
          )
          100%),
    -webkit-radial-gradient(0% 50%, 50% 10%, hsla(0, 0%, 0%, 0.1) 0%, hsla(
            0,
            0%,
            0%,
            0
          )
          100%),
    -webkit-radial-gradient(100% 50%, 50% 06%, hsla(0, 0%, 0%, 0.1) 0%, hsla(
            0,
            0%,
            0%,
            0
          )
          100%);
}

.metal.radial:before {
  transform: rotate(65deg);
}

.metal.radial:after {
  transform: rotate(-65deg);
}

/* Linear ------------------------- */
.metal.linear {
  border-radius: 0.5em;
  background-image: -webkit-repeating-linear-gradient(
      left,
      hsla(0, 0%, 100%, 0) 0%,
      hsla(0, 0%, 100%, 0) 6%,
      hsla(0, 0%, 100%, 0.1) 7.5%
    ),
    -webkit-repeating-linear-gradient(left, hsla(0, 0%, 0%, 0) 0%, hsla(
            0,
            0%,
            0%,
            0
          )
          4%, hsla(0, 0%, 0%, 0.03) 4.5%),
    -webkit-repeating-linear-gradient(left, hsla(0, 0%, 100%, 0) 0%, hsla(
            0,
            0%,
            100%,
            0
          )
          1.2%, hsla(0, 0%, 100%, 0.15) 2.2%),
    linear-gradient(
      180deg,
      hsl(0, 0%, 78%) 0%,
      hsl(0, 0%, 90%) 47%,
      hsl(0, 0%, 78%) 53%,
      hsl(0, 0%, 70%)100%
    );
}

.mt1 {
  font-size: 1.5em !important;
  width: 100px;
  height: 80px;
  border: none;
  display: block;
  text-decoration: none;
  margin-top: 4px;
  margin-left: $car;
  margin-right: $car;
}

.btnActive {
  color: hsl(210, 100%, 40%);
  text-shadow: hsla(210, 100%, 20%, 0.3) 0 -1px 0, hsl(210, 100%, 85%) 0 2px 1px,
    hsla(200, 100%, 80%, 1) 0 0 5px, hsla(210, 100%, 50%, 0.6) 0 0 20px;
  box-shadow: inset hsla(210, 100%, 30%, 1) 0 0px 0px 4px,
    inset hsla(210, 100%, 15%, 0.4) 0 -1px 5px 4px,
    inset hsla(210, 100%, 20%, 0.25) 0 -1px 0px 7px,
    inset hsla(210, 100%, 100%, 0.7) 0 2px 1px 7px,
    hsla(210, 100%, 75%, 0.8) 0 0px 3px 2px,
    hsla(210, 50%, 40%, 0.25) 0 -5px 6px 4px,
    hsla(210, 80%, 95%, 1) 0 5px 6px 4px; /* outer HL */
}

.btnOn {
  color: hsl(120, 100%, 54%);
  text-shadow: hsla(120, 39%, 54%, 0.3) 0 -1px 0, hsl(120, 39%, 85%) 0 2px 1px,
    hsla(120, 39%, 80%, 1) 0 0 5px, hsla(120, 39%, 50%, 0.6) 0 0 20px;
  box-shadow: inset hsla(120, 40%, 30%, 1) 0 0px 0px 4px,
    inset hsla(120, 40%, 15%, 0.4) 0 -1px 5px 4px,
    inset hsla(120, 40%, 20%, 0.25) 0 -1px 0px 7px,
    inset hsla(120, 40%, 100%, 0.7) 0 2px 1px 7px,
    hsla(120, 40%, 75%, 0.8) 0 0px 3px 2px,
    hsla(120, 40%, 40%, 0.25) 0 -5px 6px 4px,
    hsla(120, 40%, 95%, 1) 0 5px 6px 4px; /* outer HL */
}

.btnOff {
  color: hsl(010, 100%, 40%);
  text-shadow: hsla(010, 100%, 20%, 0.3) 0 -1px 0, hsl(210, 100%, 85%) 0 2px 1px,
    hsla(200, 100%, 80%, 1) 0 0 5px, hsla(010, 100%, 50%, 0.6) 0 0 20px;
  box-shadow: inset hsla(010, 100%, 30%, 1) 0 0px 0px 4px,
    inset hsla(010, 100%, 15%, 0.4) 0 -1px 5px 4px,
    inset hsla(010, 100%, 20%, 0.25) 0 -1px 0px 7px,
    inset hsla(010, 100%, 100%, 0.7) 0 2px 1px 7px,
    hsla(010, 100%, 75%, 0.8) 0 0px 3px 2px,
    hsla(010, 50%, 40%, 0.25) 0 -5px 6px 4px,
    hsla(010, 80%, 95%, 1) 0 5px 6px 4px; /* outer HL */
}

.metal.linear.oval {
  width: 50px;
  height: 50px;
  line-height: 7px !important;
  border-radius: 50%;
}

.btnsOff {
  border-top: 2px solid gray;
  border-left: 2px solid gray;
  border-bottom: 2px solid silver;
  border-right: 2px solid silver;
}

            
          
!
            
              class OuterDiv extends React.Component {
  render() {
    return (
      <button
        className={this.props.klasa}
        id={this.props.myid}
        onClick={this.props.onClick}
      >
        {this.props.letter}
        {this.props.audio}
      </button>
    );
  }
}

class AudioTag extends React.Component {
  render() {
    return (
      <audio
        ref={this.props.myref}
        className={this.props.klasa}
        id={this.props.myid}
        src={this.props.source}
      >
        {this.props.warning}
      </audio>
    );
  }
}

class Display extends React.Component {
  render() {
    return (
      <div id={this.props.id} className={this.props.klasa}>
        {this.props.displayText}
      </div>
    );
  }
}

class Switch1 extends React.Component {
  render() {
    return (
      <div className={this.props.klasa}>
        <input
          id={this.props.mySwitchid}
          type={this.props.myTypeBox}
          onChange={this.props.myChange}
        />
        <div className={this.props.myWrapperKlasa}>
          <label
            htmlFor={this.props.myLabhtmlFor}
            className={this.props.myLabKlasa}
          >
            <span className={this.props.mySpanKlasa} />
            <span className={this.props.mySpanKlasa} />
            <span className={this.props.mySpanKlasa} />
          </label>
        </div>
      </div>
    );
  }
}

class Switch2 extends React.Component {
  render() {
    return (
      <div className={this.props.klasa}>
        <input
          id={this.props.mySwitchid}
          type={this.props.myType}
          min={this.props.myMin}
          max={this.props.myMax}
          value={this.props.myRangeVal}
          className={this.props.rangeKlasa}
          onChange={this.props.myChange}
        />
        <div className={this.props.volumeTextKlasa}>
          {this.props.volumeText}
        </div>
      </div>
    );
  }
}

class KillSwitch extends React.Component {
  render() {
    return (
      <div
        style={this.props.myStyle}
        className={this.props.klasa}
        onClick={this.props.killClick}
      >
        {this.props.killSwitchText}
      </div>
    );
  }
}

let sounds = [];

class DrumMachine extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      display: null,
      sliderVal: 50,
      volume: 0.5,
      mySwitch: true,
      prevVolume: 0.5,
      fancy: false
    };
    this.handleClick = this.handleClick.bind(this); //Function that when you click button with mouse, plays sound.
    this.keyPress = this.keyPress.bind(this); //Function when you click on key,  plays sound.
    this.handleVolume = this.handleVolume.bind(this); //Volume up and down on range input.
    this.onOff = this.onOff.bind(this); //Turn sound off or on.
    this.fancyToggle = this.fancyToggle.bind(this); //It toggles between different sets of audio tracks.
    this.playAudio = this.playAudio.bind(this); //Function that play audio.

    //Only changing things is in an array this.pads.id1, id2 and reff.
    this.url = "https://s3.amazonaws.com/freecodecamp/drums/";
    this.mp3 = ".mp3";
    this.pads = {
      reff: ["Q", "W", "E", "A", "S", "D", "Z", "X", "C"],
      id1: [
        "Heater-1",
        "Heater-2",
        "Heater-3",
        "Heater-4_1",
        "Heater-6",
        "Dsc_Oh",
        "Kick_n_Hat",
        "RP4_KICK_1",
        "Cev_H2"
      ],
      id2: [
        "Chord_1",
        "Chord_2",
        "Chord_3",
        "Give_us_a_light",
        "Dry_Ohh",
        "Bld_H1",
        "punchy_kick_1",
        "side_stick_1",
        "Brk_Snr"
      ]
    };

    //An array of all refs of audio elements.
    this.audioRefs = [];

    for (let elem in this.pads.reff) {
      this[elem] = React.createRef();
      this.audioRefs.push(this[elem]);
    }
  }

  componentDidMount() {
    //Set event listeners for keypress
    window.addEventListener("keyup", this.keyPress);

    //Gather all audio objects through their respective refs.
    for (let elem in this.audioRefs) {
      sounds.push(this[elem].current);
    }
  }

  componentWillUnmount() {
    //Unmount all ref's.
    window.removeEventListener("keyup", this.keyPress);

    //Unmount all ref's.
    sounds = [
      this.Q.current,
      this.W.current,
      this.E.current,
      this.A.current,
      this.S.current,
      this.D.current,
      this.Z.current,
      this.X.current,
      this.C.current
    ];
  }

  playAudio(par1, par2, par3) {
    //Par1 is index of an given element be that be audio or outer div. Par2 is this.state.volume and Par3 is element itself.

    //Assign par1 as index to know which element(by ref) should 'engage'.
    sounds[par1].volume = par2; //After element is 'engaged', set it's volume.
    sounds[par1].currentTime = 0; //Added this so you may for example, play sound 5 times subsequently.
    sounds[par1].play(); //After element is 'engaged', set it's to play.

    return arguments;
  }

  keyPress(event) {
    let myKey = event.key; //Get pressed key.
    let clikedId;

    //Depending if toggle track button is on or off, it assigns appropriate array of id's.
    if (this.state.fancy === false) {
      clikedId = [...this.pads.id1];
    } else if (this.state.fancy === true) {
      clikedId = [...this.pads.id2];
    }

    let index = this.pads.reff.indexOf(myKey.toUpperCase()); //Gets an index by comparing myKey with content of an array with refs.

    //Calls function playAudio and gives it parameters. First is index of pressed key from array. Second is current volume, third is clikced element itself.
    let play = [...this.playAudio(index, this.state.volume, clikedId[index])];

    //Set state display with value from displayId.
    this.setState({
      display: play[2] //Second argument of playAudio is 'message' needed to show on display component.
    });

    if (this.state.mySwitch) {
      //Check if it's DrumMachine is turned off. If it's not i.e 'on' then pressed button lights up. If it is, then it will not light up.
      sounds[index].parentNode.classList.add("btnActive");
      setTimeout(function() {
        sounds[index].parentNode.classList.remove("btnActive");
      }, 150);
    } else {
      //Set default styling for bottom border when pressed/clicked.
      sounds[index].parentNode.classList.add("btnsOff");
      setTimeout(function() {
        sounds[index].parentNode.classList.remove("btnsOff");
      }, 150);
    }
  }

  handleClick(e) {
    let clikedId;

    //Depending if toggle track button is on or off, it assigns appropriate array of id's.
    if (this.state.fancy === false) {
      clikedId = [...this.pads.id1];
    } else if (this.state.fancy === true) {
      clikedId = [...this.pads.id2];
    }

    let index = clikedId.indexOf(e.target.id); //Gets an index by comparing myKey with content of an array with refs.

    //Calls function playAudio and gives it parameters. First is index of pressed key from array. Second is current volume, third is clikced element itself.
    let play = [...this.playAudio(index, this.state.volume, clikedId[index])];

    //Set state display with value from displayId.
    this.setState({
      display: play[2]
    });

    if (this.state.mySwitch) {
      //Check if it's DrumMachine is turned off. If it's not i.e 'on' then clicked button lights up. If it is, then it will not light up.
      sounds[index].parentNode.classList.add("btnActive");
      setTimeout(function() {
        sounds[index].parentNode.classList.remove("btnActive");
      }, 150);
    } else {
      //Set default styling for bottom border when pressed/clicked.
      sounds[index].parentNode.classList.add("btnsOff");
      setTimeout(function() {
        sounds[index].parentNode.classList.remove("btnsOff");
      }, 150);
    }
  }

  //Sets up volume.
  handleVolume(e) {
    if (this.state.mySwitch) {
      this.setState({
        volume: e.target.value / 100, //Get value of range bar and divides it by 100 and set state volume with said value. Later is used for volume of playing sounds.
        sliderVal: e.target.value, //Get value of range bar and set state sliderVal.
        prevVolume: e.target.value / 100 //Set as previous volume value, in case when you set switch of then on again, then it's needs this previous value for volume.
      });
    } else {
      this.setState({
        sliderVal: e.target.value, //Get value of range bar and set state sliderVal.
        prevVolume: e.target.value / 100 //Set as previous volume value, in case when you set switch of then on again, then it's needs this previous value for volume.
      });
    }
  }

  //Turns audio on/off.
  onOff(e) {
    if (this.state.mySwitch) {
      //If state mySwitch is 'truthy', then:
      this.setState({
        mySwitch: !this.state.mySwitch, //set state mySwitch with reverse value, it's a state of switch itself. It is used for regulating switch's position i.e. when is 'on' it's on left side, if it's of, then floats to right side.
        volume: 0 //sets volume to zero.
      });
    } else {
      this.setState({
        mySwitch: !this.state.mySwitch, //same as previous,
        volume: this.state.prevVolume, //If switch is false i.e. turned off, then set volume to level prior to turning it off.
        display: null
      });
    }
  }

  //Function for toggling between audio sets.
  fancyToggle(e) {
    //If checkbox is checked, then one set, if it isn't, then other audio set.
    this.setState({
      fancy: e.target.checked //Set state with value of attribute checked of an checkbox. Said value if present is 'truthy, if it's not then is 'falsy'.
    });
  }

  render() {
    const fancyId = this.state.fancy ? this.pads.id2 : this.pads.id1; //If checkbox i.e toggle button for alternating between audio sets, is true, then map object containing alternative id's, if it's not, then from other object containing id's.
    const track = this.state.fancy
      ? this.pads.id2.map((item, i) => this.url + item + this.mp3)
      : this.pads.id1.map((item, i) => this.url + item + this.mp3); //If checkbox i.e toggle button for alternating between audio sets, is true, then map object containing alternative tracks, if it's not, then from other object containing tracks.

    const displayId =
      this.state.display && this.state.mySwitch
        ? this.state.display.replace(/-|_/g, " ")
        : "No sound"; //If state display has 'truthy' value, then take value from said state and at the same time replace al dashes with empty char and set value to this variable. Then use this variable as value for content of an element with id="display".
    const switchText = this.state.mySwitch ? "On" : "Off"; //Checks state mySwitch, if it's 'truthy', then set text in on/off switch certain way, if it's not then other way.

    //Changes class for volume text depending of value of range input.
    const volumer =
      this.state.sliderVal <= 33
        ? "vol1"
        : this.state.sliderVal > 33 && this.state.sliderVal <= 66
          ? "vol2"
          : "vol3";

    //Mapping of all audio's encompassed by div elements.
    const myKeys = this.pads.reff.map((item, i) => (
      <OuterDiv
        key={"outerDiv" + i}
        myid={fancyId[i]}
        klasa="drum-pad metal linear"
        onClick={this.handleClick}
        letter={this.pads.reff[i]}
        audio={
          <AudioTag
            key={"audio" + i}
            myid={this.pads.reff[i]}
            myref={this.audioRefs[i]}
            klasa="clip"
            source={track[i]}
            warning="Your browser doesn't support this audio format."
          />
        }
      />
    ));

    const killSwitchStyle =
      switchText === "On" ? { color: "green" } : { color: "red" }; //Sets killSwitch font color.
    const killClass = this.state.mySwitch
      ? "mt1 metal linear oval btnOn"
      : "mt1 metal linear oval btnOff"; //Sets killSwitch background color.

    return (
      <div id="drum-machine" className="grid-container cent">
        <Display id="display" klasa="item1" displayText={displayId} />

        {myKeys}

        <Switch1
          klasa="item3"
          mySwitchid="switch"
          myTypeBox="checkbox"
          myChange={this.fancyToggle}
          myWrapperKlasa="wrap"
          myLabhtmlFor="switch"
          myLabKlasa="lbx"
          mySpanKlasa="rib"
        />

        <Switch2
          klasa="item2"
          mySwitchid="myRange"
          myType="range"
          myMin="1"
          myMax="100"
          myRangeVal={this.state.sliderVal}
          rangeKlasa="slider"
          myChange={this.handleVolume}
          volumeTextKlasa={volumer}
          volumeText={"Volume " + this.state.sliderVal}
        />

        <KillSwitch
          myStyle={killSwitchStyle}
          klasa={killClass}
          killClick={this.onOff}
          killSwitchText={switchText}
        />
      </div>
    );
  }
}

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

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console