Pen Settings

HTML

CSS

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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>-->
<div id="app"></div>

              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Bungee+Hairline');
@import url('https://fonts.googleapis.com/css?family=Megrim');

body
  min-height 100%
  position relative
.footer
  position absolute
  bottom 0
  width 100%
  height 60px
  background-color #f5f5f5
.text-footer
  margin 20px 0
#app
  padding-bottom 100px
btb-color = #462E74
btb-purple-shadow = #2C1657
.beatbox-main
  width 400px
  height 500px
  border-radius 30px
  padding 30px
  background-color btb-color
  color white
  box-shadow 15px 10px btb-purple-shadow

  .beatbox-container
    color white
    .beatbox-screen
      display flex
      flex-direction row
      justify-content flex-end
      align-items center
      background-color #ddd
      margin-top 20px
      padding 10px
      color black
      min-height 40px
      box-shadow 5px 5px 5px grey inset
      .beatbox-screen-text
        font-family 'Bungee Hairline'
        font-size 1.6em
        font-weight 900
        text-shadow 2px 2px 4px
        white-space nowrap
        overflow hidden
        margin 0px

    .beatbox-brand-container
      width 100%
      padding 5px 0px
      .beatbox-brand-text
        font-family 'Megrim', 'Open Sans', 'Sans Serif'
        font-size 1em
        text-align right
        //color #D4AF37
        color #2efe07

    .beatbox-controllers
      height 0px

    .beatbox-panel
      display flex
      flex-direction column
      justify-content space-between
      margin-top 10px
      .beatbox-panel-row
        display flex
        flex-direction row
        justify-content space-between
        margin-bottom 30px
        .drum-pad
          font-size 0
          display flex
          height 80px
          width 90px
          border-radius 10px
          background-color white
          transition box-shadow 0.15s ease-in-out
          box-shadow 5px 5px #aaa, 0px 0px #555 inset
          background radial-gradient(circle, #fff, #ddd, #aaa)
          .beatbox-light
            width 100%
            height 100%
            border-radius 10px
            transition opacity 0.15s linear
            opacity 0
            //background radial-gradient(circle, #fff, #ccc, #999)
            background radial-gradient(circle, #fff, #eee, #ddd)
          .beatbox-red-light
            width 100%
            height 100%
            border-radius 10px
            transition opacity 0.15s linear
            opacity 0
            background radial-gradient(circle, #f43, #b33, #900)
          .beatbox-yellow-light
            width 100%
            height 100%
            border-radius 10px
            transition opacity 0.15s linear
            opacity 0
            background radial-gradient(circle, #CCFF00, #AADD33, #995)
          .beatbox-blue-light
            width 100%
            height 100%
            border-radius 10px
            transition opacity 0.15s linear
            opacity 0
            background radial-gradient(circle, #4169E1, #2126E1, #119)
        .pressed
          box-shadow 0px 0px #aaa, 3px 3px #555 inset, 3px 3px 15px 3px #fff
        .red-pressed
          box-shadow 0px 0px #722, 4px 4px #722 inset, 3px 3px 15px 3px #733
        .yellow-pressed
          box-shadow 0px 0px #772, 4px 4px #772 inset, 3px 3px 15px 3px #773
        .blue-pressed
          box-shadow 0px 0px #227, 3px 3px #5179E1 inset, 4px 4px 15px 4px #338
          
.valign-center
  height 100%
  display flex
  flex-direction column
  align-items center
  justify-content center
.valign-center
  p
    display flex
              
            
!

JS

              
                /*
https://docs.google.com/uc?export=download&id=1_855IYWDt2QWWvSArqZmYoY5IIvSZk5R
https://docs.google.com/uc?export=download&id=1Z3N1q3bNBE-fL5qx0OeSGO-QtZnj576L
https://docs.google.com/uc?export=download&id=11cvGqgkDv8p_-oSm7D0sQrpBNHv7afci
https://docs.google.com/uc?export=download&id=1Vb5iwuaKxY8uj2tcGY1YqIcrLtHpcklM
https://docs.google.com/uc?export=download&id=1mKlbUJiX5nsrr0Z_xbLL8ASUesG7cf8E
https://docs.google.com/uc?export=download&id=1vcwP-8mZKIxSXkN7VrnPlW4WKybxx2oO
https://docs.google.com/uc?export=download&id=1HQ9vW2JGPvj9lRRdcwLG1CyLxDZCASUW
https://docs.google.com/uc?export=download&id=1ZwX2fyo8-8O3kuBv_CYBUJasgD9aMsCP
https://docs.google.com/uc?export=download&id=1HWaP1QsyHMBG6qcoD8N07BrsdGLY1RWb
https://docs.google.com/uc?export=download&id=1zZvuH6vXzVnwlj2lsN7uSSgwxM_pPINn
https://docs.google.com/uc?export=download&id=1DRMBWbg4NKdWdXDEqmw0UrzmZZb3TeQD
https://docs.google.com/uc?export=download&id=1gO2tg3q6kpYWvqU5SApfZ8irAXpMFMJb
https://docs.google.com/uc?export=download&id=1n4I_RPblpUqd3gDkX3dHnw_ql0bNF2YS
https://docs.google.com/uc?export=download&id=18uYmgyXzAQllmCddZgzldhhfg0aF2ni6
https://docs.google.com/uc?export=download&id=1qNXOw1kOpXUL3gJtDS0bbuhFPkj493mZ
https://docs.google.com/uc?export=download&id=1LNip_dxsfFiTC-n1y0Lki6ZWMCSUs1Om
*/
class Navbar extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <nav className="navbar navbar-expand-md navbar-dark bg-dark">
        <a className="navbar-brand" href="#">
          {this.props.brand || "Title"}
        </a>
        <button
          className="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarCollapse"
          aria-controls="navbarCollapse"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span className="navbar-toggler-icon" />
        </button>
        <div className="collapse navbar-collapse" id="navbarCollapse">
          <ul className="navbar-nav mr-auto">
            <li className="nav-item active">
              <a className="nav-link" href="#">
                Home <span className="sr-only">(current)</span>
              </a>
            </li>
            <li className="nav-item">
              <a className="nav-link" href="#">
                About
              </a>
            </li>
          </ul>
        </div>
      </nav>
    );
  }
}

class Footer extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <footer className="footer">
        <div className="container">
          <p className="text-muted text-footer">Made with 🍫 by <a href="https://mrcrjs.github.io/" target="_blank">Marco A. Rojas</a></p>
        </div>
      </footer>
    );
  }
}

class Beatbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      displayText: "BEATBOX XLII",
      pad: {
        q: false,
        w: false,
        e: false,
        a: false,
        s: false,
        d: false,
        z: false,
        x: false,
        c: false
      },
      audioSourceSelected: 'c'
    };

    this.drumMachine = React.createRef();

    this.audioPad = {
      q: React.createRef(),
      w: React.createRef(),
      e: React.createRef(),
      a: React.createRef(),
      s: React.createRef(),
      d: React.createRef(),
      z: React.createRef(),
      x: React.createRef(),
      c: React.createRef()
    };

    this.audioSources = {
      q: {
        a:
          "https://docs.google.com/uc?export=download&id=1_855IYWDt2QWWvSArqZmYoY5IIvSZk5R",
        b:
          "https://docs.google.com/uc?export=download&id=1Z3N1q3bNBE-fL5qx0OeSGO-QtZnj576L",
        c: "https://github.com/wesbos/JavaScript30/raw/master/01%20-%20JavaScript%20Drum%20Kit/sounds/boom.wav"
      },
      w: {
        a:
          "https://docs.google.com/uc?export=download&id=11cvGqgkDv8p_-oSm7D0sQrpBNHv7afci",
        b:
          "https://docs.google.com/uc?export=download&id=1Vb5iwuaKxY8uj2tcGY1YqIcrLtHpcklM",
        c: "https://github.com/wesbos/JavaScript30/raw/master/01%20-%20JavaScript%20Drum%20Kit/sounds/clap.wav"
      },
      e: {
        a:
          "https://docs.google.com/uc?export=download&id=1mKlbUJiX5nsrr0Z_xbLL8ASUesG7cf8E",
        b:
          "https://docs.google.com/uc?export=download&id=1vcwP-8mZKIxSXkN7VrnPlW4WKybxx2oO",
        c: "https://github.com/wesbos/JavaScript30/raw/master/01%20-%20JavaScript%20Drum%20Kit/sounds/hihat.wav"
      },
      a: {
        a:
          "https://docs.google.com/uc?export=download&id=1HQ9vW2JGPvj9lRRdcwLG1CyLxDZCASUW",
        b:
          "https://docs.google.com/uc?export=download&id=1ZwX2fyo8-8O3kuBv_CYBUJasgD9aMsCP",
        c: "https://github.com/wesbos/JavaScript30/raw/master/01%20-%20JavaScript%20Drum%20Kit/sounds/kick.wav"
      },
      s: {
        a:
          "https://docs.google.com/uc?export=download&id=1HWaP1QsyHMBG6qcoD8N07BrsdGLY1RWb",
        b:
          "https://docs.google.com/uc?export=download&id=1zZvuH6vXzVnwlj2lsN7uSSgwxM_pPINn",
        c: "https://github.com/wesbos/JavaScript30/raw/master/01%20-%20JavaScript%20Drum%20Kit/sounds/openhat.wav"
      },
      d: {
        a:
          "https://docs.google.com/uc?export=download&id=1DRMBWbg4NKdWdXDEqmw0UrzmZZb3TeQD",
        b:
          "https://docs.google.com/uc?export=download&id=1gO2tg3q6kpYWvqU5SApfZ8irAXpMFMJb",
        c: "https://github.com/wesbos/JavaScript30/raw/master/01%20-%20JavaScript%20Drum%20Kit/sounds/ride.wav"
      },
      z: {
        a:
          "https://docs.google.com/uc?export=download&id=1n4I_RPblpUqd3gDkX3dHnw_ql0bNF2YS",
        b:
          "https://docs.google.com/uc?export=download&id=18uYmgyXzAQllmCddZgzldhhfg0aF2ni6",
        c: "https://github.com/wesbos/JavaScript30/raw/master/01%20-%20JavaScript%20Drum%20Kit/sounds/snare.wav"
      },
      x: {
        a:
          "https://docs.google.com/uc?export=download&id=1qNXOw1kOpXUL3gJtDS0bbuhFPkj493mZ",
        b:
          "https://docs.google.com/uc?export=download&id=1LNip_dxsfFiTC-n1y0Lki6ZWMCSUs1Om",
        c: "https://github.com/wesbos/JavaScript30/raw/master/01%20-%20JavaScript%20Drum%20Kit/sounds/tink.wav"
      },
      c: {
        a:
          "https://docs.google.com/uc?export=download&id=1mKlbUJiX5nsrr0Z_xbLL8ASUesG7cf8E",
        b:
          "https://docs.google.com/uc?export=download&id=18uYmgyXzAQllmCddZgzldhhfg0aF2ni6",
        c: "https://github.com/wesbos/JavaScript30/raw/master/01%20-%20JavaScript%20Drum%20Kit/sounds/tom.wav"
      }
    };

    this.pressedPadButton = this.pressedPadButton.bind(this);
    this.unpressedPadButton = this.unpressedPadButton.bind(this);
    this.handleKeyDown = this.handleKeyDown.bind(this);
    this.handleKeyUp = this.handleKeyUp.bind(this);
    this.handleClickDown = this.handleClickDown.bind(this);
    this.handleClickUp = this.handleClickUp.bind(this);
  }

  componentDidMount() {
    this.drumMachine.current.focus();
  }

  isPadKey(k) {
    return !!(['q', 'w', 'e', 'a', 's', 'd', 'z', 'x', 'c'].indexOf(k) + 1);
  }

  getDisplayText(k) {
  const audioDescription = {
    q: "Boom",
    w: "Clap",
    e: "Hi-hat",
    a: "Kick",
    s: "Open Hat",
    d: "Ride",
    z: "Snare",
    x: "Tink",
    c: "Tom"
  }
  return audioDescription[k];
}

  pressedPadButton(key) {
    if (this.isPadKey(key) && !this.state.pad[key]) {
      let updatedPad = { ...this.state.pad };
      updatedPad[key] = true;
      this.setState({
        pad: { ...updatedPad },
        displayText: this.getDisplayText(key)
      },
        () => {
          this.audioPad[key].current.currentTime = 0;
          this.audioPad[key].current.play();
        }
      );
    }
  }

  unpressedPadButton(key) {
    if (this.isPadKey(key) && this.state.pad[key]) {
      let updatedPad = { ...this.state.pad };
      updatedPad[key] = false;
      this.audioPad[key].current.pause();
      this.setState({
        pad: { ...updatedPad }
      },
        () => this.audioPad[key].current.pause() 
      );
    }
  }

  handleClickDown(btn) {
    this.pressedPadButton(btn);
  }

  handleClickUp(btn) {
    this.unpressedPadButton(btn);
  }

  handleKeyDown(e) {
    const key = e.key.toLowerCase();
    this.pressedPadButton(key);
  }

  handleKeyUp(e) {
    const key = e.key.toLowerCase();
    this.unpressedPadButton(key);
  }

  render() {
    return (
      <div
        ref={this.drumMachine}
        id="drum-machine"
        className="beatbox-main"
        onKeyDown={this.handleKeyDown}
        onKeyUp={this.handleKeyUp}
        tabIndex="-1"
      >
        <div className="beatbox-container">
          <div id="display" className="beatbox-screen">
            <span className="beatbox-screen-text">
              {this.state.displayText}
            </span>
          </div>
          <div className="beatbox-brand-container">
            <p className="beatbox-brand-text">BTB-XLII</p>
          </div>
          <div className="beatbox-controllers" />
          <div className="beatbox-panel">
            <div className="beatbox-panel-row">
              <div
                className={
                  this.state.pad["q"] ? "drum-pad pressed" : "drum-pad"
                }
                onMouseDown={() => this.handleClickDown("q")}
                onMouseUp={() => this.handleClickUp("q")}
                onTouchStart={() => this.handleClickDown("q")}
                onTouchEnd={() => this.handleClickUp("q")}
              >
                <div
                  className={"beatbox-light"}
                  style={this.state.pad["q"] ? { opacity: 0.8 } : null}
                />
                Q
                <audio
                  preload="auto"
                  ref={this.audioPad["q"]}
                  id="Q"
                  className="clip"
                  src={this.audioSources['q'][this.state.audioSourceSelected]}
                />
              </div>
              <div
                className={
                  this.state.pad["w"] ? "drum-pad yellow-pressed" : "drum-pad"
                }
                onMouseDown={() => this.handleClickDown("w")}
                onMouseUp={() => this.handleClickUp("w")}
                onTouchStart={() => this.handleClickDown("w")}
                onTouchEnd={() => this.handleClickUp("w")}
              >
                <div
                  className={"beatbox-yellow-light"}
                  style={this.state.pad["w"] ? { opacity: 0.8 } : null}
                />
                W
                <audio
                  preload="auto"
                  ref={this.audioPad["w"]}
                  id="W"
                  className="clip"
                  src={this.audioSources['w'][this.state.audioSourceSelected]}
                />
              </div>
              <div
                className={
                  this.state.pad["e"] ? "drum-pad yellow-pressed" : "drum-pad"
                }
                onMouseDown={() => this.handleClickDown("e")}
                onMouseUp={() => this.handleClickUp("e")}
                onTouchStart={() => this.handleClickDown("e")}
                onTouchEnd={() => this.handleClickUp("e")}
              >
                <div
                  className={"beatbox-yellow-light"}
                  style={this.state.pad["e"] ? { opacity: 0.8 } : null}
                />
                E
                <audio
                  preload="auto"
                  ref={this.audioPad["e"]}
                  id="E"
                  className="clip"
                  src={this.audioSources['e'][this.state.audioSourceSelected]}
                />
              </div>
            </div>
            <div className="beatbox-panel-row">
              <div
                className={
                  this.state.pad["a"] ? "drum-pad red-pressed" : "drum-pad"
                }
                onMouseDown={() => this.handleClickDown("a")}
                onMouseUp={() => this.handleClickUp("a")}
                onTouchStart={() => this.handleClickDown("a")}
                onTouchEnd={() => this.handleClickUp("a")}
              >
                <div
                  className={"beatbox-red-light"}
                  style={this.state.pad["a"] ? { opacity: 0.8 } : null}
                />
                A
                <audio
                  preload="auto"
                  ref={this.audioPad["a"]}
                  id="A"
                  className="clip"
                  src={this.audioSources['a'][this.state.audioSourceSelected]}
                />
              </div>
              <div
                className={
                  this.state.pad["s"] ? "drum-pad blue-pressed" : "drum-pad"
                }
                onMouseDown={() => this.handleClickDown("s")}
                onMouseUp={() => this.handleClickUp("s")}
                onTouchStart={() => this.handleClickDown("s")}
                onTouchEnd={() => this.handleClickUp("s")}
              >
                <div
                  className={"beatbox-blue-light"}
                  style={this.state.pad["s"] ? { opacity: 0.8 } : null}
                />
                S
                <audio
                  preload="auto"
                  ref={this.audioPad["s"]}
                  id="S"
                  className="clip"
                  src={this.audioSources['s'][this.state.audioSourceSelected]}
                />
              </div>
              <div
                className={
                  this.state.pad["d"] ? "drum-pad blue-pressed" : "drum-pad"
                }
                onMouseDown={() => this.handleClickDown("d")}
                onMouseUp={() => this.handleClickUp("d")}
                onTouchStart={() => this.handleClickDown("d")}
                onTouchEnd={() => this.handleClickUp("d")}
              >
                <div
                  className={"beatbox-blue-light"}
                  style={this.state.pad["d"] ? { opacity: 0.8 } : null}
                />
                D
                <audio
                  preload="auto"
                  ref={this.audioPad["d"]}
                  id="D"
                  className="clip"
                  src={this.audioSources['d'][this.state.audioSourceSelected]}
                />
              </div>
            </div>
            <div className="beatbox-panel-row">
              <div
                className={
                  this.state.pad["z"] ? "drum-pad red-pressed" : "drum-pad"
                }
                onMouseDown={() => this.handleClickDown("z")}
                onMouseUp={() => this.handleClickUp("z")}
                onTouchStart={() => this.handleClickDown("z")}
                onTouchEnd={() => this.handleClickUp("z")}
              >
                <div
                  className={"beatbox-red-light"}
                  style={this.state.pad["z"] ? { opacity: 0.8 } : null}
                />
                Z
                <audio
                  preload="auto"
                  ref={this.audioPad["z"]}
                  id="Z"
                  className="clip"
                  src={this.audioSources['z'][this.state.audioSourceSelected]}
                />
              </div>
              <div
                className={
                  this.state.pad["x"] ? "drum-pad blue-pressed" : "drum-pad"
                }
                onMouseDown={() => this.handleClickDown("x")}
                onMouseUp={() => this.handleClickUp("x")}
                onTouchStart={() => this.handleClickDown("x")}
                onTouchEnd={() => this.handleClickUp("x")}
              >
                <div
                  className={"beatbox-blue-light"}
                  style={this.state.pad["x"] ? { opacity: 0.8 } : null}
                />
                X
                <audio
                  preload="auto"
                  ref={this.audioPad["x"]}
                  id="X"
                  className="clip"
                  src={this.audioSources['x'][this.state.audioSourceSelected]}
                />
              </div>
              <div
                className={
                  this.state.pad["c"] ? "drum-pad blue-pressed" : "drum-pad"
                }
                onMouseDown={() => this.handleClickDown("c")}
                onMouseUp={() => this.handleClickUp("c")}
                onTouchStart={() => this.handleClickDown("c")}
                onTouchEnd={() => this.handleClickUp("c")}
              >
                <div
                  className={"beatbox-blue-light"}
                  style={this.state.pad["c"] ? { opacity: 0.8 } : null}
                />
                C
                <audio
                  preload="auto"
                  ref={this.audioPad["c"]}
                  id="C"
                  className="clip"
                  src={this.audioSources['c'][this.state.audioSourceSelected]}
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { currentPage: "home" };
  }

  render() {
    return (
      <div>
        <header>
          <Navbar
            brand="Beatbox"
            activePage={this.state.currentPage}
            color="inverse"
          />
        </header>
        <div className="container mt-5">
          <div className="row">
            <div className="col-md-8 col-md-offset-2">
              <h1>Beatbox</h1>
              <p className="lead text-muted">FCC beatbox project</p>
            </div>
          </div>
          <div className="row">
            <div className="col-md-2 text-muted">
              <div className="valign-center text-center">
              <p>
                Q&emsp;W&emsp;E
              <br/>
                A&emsp;S&emsp;D
              <br/>
                Z&emsp;X&emsp;C
              </p>
              </div>
            </div>
            <div className="col-sm-12 col-md-8">
              <div className="d-flex justify-content-center">
                 <Beatbox />
              </div>
            </div>
          </div>
        </div>
        <Footer />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

              
            
!
999px

Console