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.

            
              %div.lcd-screen
  %div.lcd-container
    %svg.tempo-lcd.lcd-element-three{:viewbox => "0 0 614.5 324", :xmlns => "http://www.w3.org/2000/svg"}
      %g.lcd-0.digit.digit-1
        %g.lcd-element.top-center
          %polygon{:points => "149.5 40 49.5 40 50.9 0 150.9 0 149.5 40"}
          %polygon{:points => "149.5 40 150.9 0 170.2 20 149.5 40"}
          %polygon{:points => "50.9 0 49.5 40 30.2 20 50.9 0"}
        %g.lcd-element.top-right
          %polygon{:points => "147 141 187 141 190.5 41 150.5 41 147 141"}
          %polygon{:points => "190.5 41 150.5 41 171.1 21 190.5 41"}
          %polygon{:points => "147 141 187 141 166.3 161 147 141"}
        %g.lcd-element.top-left
          %polygon{:points => "5 141 45 141 48.5 41 8.5 41 5 141"}
          %polygon{:points => "48.5 41 8.5 41 29.1 21 48.5 41"}
          %polygon{:points => "5 141 45 141 24.3 161 5 141"}
        %g.lcd-element.mid-center
          %polygon{:points => "144.5 182 44.5 182 45.9 142 145.9 142 144.5 182"}
          %polygon{:points => "144.5 182 145.9 142 165.2 162 144.5 182"}
          %polygon{:points => "45.9 142 44.5 182 25.2 162 45.9 142"}
        %g.lcd-element.bottom-right
          %polygon{:points => "142 283 182 283 185.5 183 145.5 183 142 283"}
          %polygon{:points => "185.5 183 145.5 183 166.2 163 185.5 183"}
          %polygon{:points => "142 283 182 283 161.3 303 142 283"}
        %g.lcd-element.bottom-left
          %polygon{:points => "0 283 40 283 43.5 183 3.5 183 0 283"}
          %polygon{:points => "43.5 183 3.5 183 24.2 163 43.5 183"}
          %polygon{:points => "0 283 40 283 19.3 303 0 283"}
        %g.lcd-element.bottom-center
          %polygon{:points => "139.6 324 141 284 160.3 304 139.6 324"}
          %polygon{:points => "41 284 39.6 324 20.3 304 41 284"}
          %polygon{:points => "139.6 324 39.6 324 41 284 141 284 139.6 324"}
      %g.lcd-1.digit.digit-2
        %g.lcd-element.top-center
          %polygon{:points => "361.5 40 261.5 40 262.9 0 362.9 0 361.5 40"}
          %polygon{:points => "361.5 40 362.9 0 382.2 20 361.5 40"}
          %polygon{:points => "262.9 0 261.5 40 242.2 20 262.9 0"}
        %g.lcd-element.top-right
          %polygon{:points => "359 141 399 141 402.5 41 362.5 41 359 141"}
          %polygon{:points => "402.5 41 362.5 41 383.1 21 402.5 41"}
          %polygon{:points => "359 141 399 141 378.3 161 359 141"}
        %g.lcd-element.top-left
          %polygon{:points => "217 141 257 141 260.5 41 220.5 41 217 141"}
          %polygon{:points => "260.5 41 220.5 41 241.1 21 260.5 41"}
          %polygon{:points => "217 141 257 141 236.3 161 217 141"}
        %g.lcd-element.mid-center
          %polygon{:points => "356.5 182 256.5 182 257.9 142 357.9 142 356.5 182"}
          %polygon{:points => "356.5 182 357.9 142 377.2 162 356.5 182"}
          %polygon{:points => "257.9 142 256.5 182 237.2 162 257.9 142"}
        %g.lcd-element.bottom-right
          %polygon{:points => "354 283 394 283 397.5 183 357.5 183 354 283"}
          %polygon{:points => "397.5 183 357.5 183 378.2 163 397.5 183"}
          %polygon{:points => "354 283 394 283 373.3 303 354 283"}
        %g.lcd-element.bottom-left
          %polygon{:points => "212 283 252 283 255.5 183 215.5 183 212 283"}
          %polygon{:points => "255.5 183 215.5 183 236.2 163 255.5 183"}
          %polygon{:points => "212 283 252 283 231.3 303 212 283"}
        %g.lcd-element.bottom-center
          %polygon{:points => "351.6 324 353 284 372.3 304 351.6 324"}
          %polygon{:points => "253 284 251.6 324 232.3 304 253 284"}
          %polygon{:points => "351.6 324 251.6 324 253 284 353 284 351.6 324"}
      %g.lcd-2.digit.digit-0
        %g.lcd-element.top-center
          %polygon{:points => "573.5 40 473.5 40 474.9 0 574.9 0 573.5 40"}
          %polygon{:points => "573.5 40 574.9 0 594.2 20 573.5 40"}
          %polygon{:points => "474.9 0 473.5 40 454.2 20 474.9 0"}
        %g.lcd-element.top-right
          %polygon{:points => "571 141 611 141 614.5 41 574.5 41 571 141"}
          %polygon{:points => "614.5 41 574.5 41 595.1 21 614.5 41"}
          %polygon{:points => "571 141 611 141 590.3 161 571 141"}
        %g.lcd-element.top-left
          %polygon{:points => "429 141 469 141 472.5 41 432.5 41 429 141"}
          %polygon{:points => "472.5 41 432.5 41 453.1 21 472.5 41"}
          %polygon{:points => "429 141 469 141 448.3 161 429 141"}
        %g.lcd-element.mid-center
          %polygon{:points => "568.5 182 468.5 182 469.9 142 569.9 142 568.5 182"}
          %polygon{:points => "568.5 182 569.9 142 589.2 162 568.5 182"}
          %polygon{:points => "469.9 142 468.5 182 449.2 162 469.9 142"}
        %g.lcd-element.bottom-right
          %polygon{:points => "566 283 606 283 609.5 183 569.5 183 566 283"}
          %polygon{:points => "609.5 183 569.5 183 590.2 163 609.5 183"}
          %polygon{:points => "566 283 606 283 585.3 303 566 283"}
        %g.lcd-element.bottom-left
          %polygon{:points => "424 283 464 283 467.5 183 427.5 183 424 283"}
          %polygon{:points => "467.5 183 427.5 183 448.2 163 467.5 183"}
          %polygon{:points => "424 283 464 283 443.3 303 424 283"}
        %g.lcd-element.bottom-center
          %polygon{:points => "563.6 324 565 284 584.3 304 563.6 324"}
          %polygon{:points => "465 284 463.6 324 444.3 304 465 284"}
          %polygon{:points => "563.6 324 463.6 324 465 284 565 284 563.6 324"}
        %div
          tempo

  %div.lcd-container
    %svg.vol-lcd.lcd-element-two{:viewbox => "0 0 402.5 324", :xmlns => "http://www.w3.org/2000/svg"}
      %g.lcd-0.digit.digit-7
        %g.lcd-element.top-center
          %polygon{:points => "149.5 40 49.5 40 50.9 0 150.9 0 149.5 40"}
          %polygon{:points => "149.5 40 150.9 0 170.2 20 149.5 40"}
          %polygon{:points => "50.9 0 49.5 40 30.2 20 50.9 0"}
        %g.lcd-element.top-right
          %polygon{:points => "147 141 187 141 190.5 41 150.5 41 147 141"}
          %polygon{:points => "190.5 41 150.5 41 171.1 21 190.5 41"}
          %polygon{:points => "147 141 187 141 166.3 161 147 141"}
        %g.lcd-element.top-left
          %polygon{:points => "5 141 45 141 48.5 41 8.5 41 5 141"}
          %polygon{:points => "48.5 41 8.5 41 29.1 21 48.5 41"}
          %polygon{:points => "5 141 45 141 24.3 161 5 141"}
        %g.lcd-element.mid-center
          %polygon{:points => "144.5 182 44.5 182 45.9 142 145.9 142 144.5 182"}
          %polygon{:points => "144.5 182 145.9 142 165.2 162 144.5 182"}
          %polygon{:points => "45.9 142 44.5 182 25.2 162 45.9 142"}
        %g.lcd-element.bottom-right
          %polygon{:points => "142 283 182 283 185.5 183 145.5 183 142 283"}
          %polygon{:points => "185.5 183 145.5 183 166.2 163 185.5 183"}
          %polygon{:points => "142 283 182 283 161.3 303 142 283"}
        %g.lcd-element.bottom-left
          %polygon{:points => "0 283 40 283 43.5 183 3.5 183 0 283"}
          %polygon{:points => "43.5 183 3.5 183 24.2 163 43.5 183"}
          %polygon{:points => "0 283 40 283 19.3 303 0 283"}
        %g.lcd-element.bottom-center
          %polygon{:points => "139.6 324 141 284 160.3 304 139.6 324"}
          %polygon{:points => "41 284 39.6 324 20.3 304 41 284"}
          %polygon{:points => "139.6 324 39.6 324 41 284 141 284 139.6 324"}
      %g.lcd-1.digit.digit-5
        %g.lcd-element.top-center
          %polygon{:points => "361.5 40 261.5 40 262.9 0 362.9 0 361.5 40"}
          %polygon{:points => "361.5 40 362.9 0 382.2 20 361.5 40"}
          %polygon{:points => "262.9 0 261.5 40 242.2 20 262.9 0"}
        %g.lcd-element.top-right
          %polygon{:points => "359 141 399 141 402.5 41 362.5 41 359 141"}
          %polygon{:points => "402.5 41 362.5 41 383.1 21 402.5 41"}
          %polygon{:points => "359 141 399 141 378.3 161 359 141"}
        %g.lcd-element.top-left
          %polygon{:points => "217 141 257 141 260.5 41 220.5 41 217 141"}
          %polygon{:points => "260.5 41 220.5 41 241.1 21 260.5 41"}
          %polygon{:points => "217 141 257 141 236.3 161 217 141"}
        %g.lcd-element.mid-center
          %polygon{:points => "356.5 182 256.5 182 257.9 142 357.9 142 356.5 182"}
          %polygon{:points => "356.5 182 357.9 142 377.2 162 356.5 182"}
          %polygon{:points => "257.9 142 256.5 182 237.2 162 257.9 142"}
        %g.lcd-element.bottom-right
          %polygon{:points => "354 283 394 283 397.5 183 357.5 183 354 283"}
          %polygon{:points => "397.5 183 357.5 183 378.2 163 397.5 183"}
          %polygon{:points => "354 283 394 283 373.3 303 354 283"}
        %g.lcd-element.bottom-left
          %polygon{:points => "212 283 252 283 255.5 183 215.5 183 212 283"}
          %polygon{:points => "255.5 183 215.5 183 236.2 163 255.5 183"}
          %polygon{:points => "212 283 252 283 231.3 303 212 283"}
        %g.lcd-element.bottom-center
          %polygon{:points => "351.6 324 353 284 372.3 304 351.6 324"}
          %polygon{:points => "253 284 251.6 324 232.3 304 253 284"}
          %polygon{:points => "351.6 324 251.6 324 253 284 353 284 351.6 324"}
        %div
          volume

  %div.lcd-container
    %svg.lcd-element-one{:viewbox => "0 0 190 324", :xmlns => "http://www.w3.org/2000/svg"}
      %g.alpha.alpha-a
        %g.lcd-element.top-center
          %polygon{:points => "149.5 40 49.5 40 50.9 0 150.9 0 149.5 40"}
          %polygon{:points => "149.5 40 150.9 0 170.2 20 149.5 40"}
          %polygon{:points => "50.9 0 49.5 40 30.2 20 50.9 0"}
        %g.lcd-element.top-right
          %polygon{:points => "147 141 187 141 190.5 41 150.5 41 147 141"}
          %polygon{:points => "190.5 41 150.5 41 171.1 21 190.5 41"}
          %polygon{:points => "147 141 187 141 166.3 161 147 141"}
        %g.lcd-element.top-left
          %polygon{:points => "5 141 45 141 48.5 41 8.5 41 5 141"}
          %polygon{:points => "48.5 41 8.5 41 29.1 21 48.5 41"}
          %polygon{:points => "5 141 45 141 24.3 161 5 141"}
        %g.lcd-element.mid-center
          %polygon{:points => "144.5 182 44.5 182 45.9 142 145.9 142 144.5 182"}
          %polygon{:points => "144.5 182 145.9 142 165.2 162 144.5 182"}
          %polygon{:points => "45.9 142 44.5 182 25.2 162 45.9 142"}
        %g.lcd-element.bottom-right
          %polygon{:points => "142 283 182 283 185.5 183 145.5 183 142 283"}
          %polygon{:points => "185.5 183 145.5 183 166.2 163 185.5 183"}
          %polygon{:points => "142 283 182 283 161.3 303 142 283"}
        %g.lcd-element.bottom-left
          %polygon{:points => "0 283 40 283 43.5 183 3.5 183 0 283"}
          %polygon{:points => "43.5 183 3.5 183 24.2 163 43.5 183"}
          %polygon{:points => "0 283 40 283 19.3 303 0 283"}
        %g.lcd-element.bottom-center
          %polygon{:points => "139.6 324 141 284 160.3 304 139.6 324"}
          %polygon{:points => "41 284 39.6 324 20.3 304 41 284"}
          %polygon{:points => "139.6 324 39.6 324 41 284 141 284 139.6 324"}
    %div
      bank
          
  %div.lcd-container.pattern-container
    - (1..8).each do |n|
      %div{:class => "pattern-item step-#{n}" }

%div.control-buttons
  %div.control-button-wrapper
    %div.control-button.record
      %i.far.fa-circle.fa-2x
    %div.label
      rec
  %div.control-button-wrapper
    %div.control-button.play
      %i.far.fa-play.fa-2x
    %div.label
      play
  %div.control-button-wrapper
    %div.control-button.pattern-left
      %i.far.fa-caret-square-left.fa-2x
    %div.label
      patt left
  %div.control-button-wrapper
    %div.control-button.pattern-right
      %i.far.fa-caret-square-right.fa-2x
    %div.label
      patt right
  %div.control-button-wrapper
    %div.control-button.bank.alpha-a
      A
    %div.label
  %div.control-button-wrapper
    %div.control-button.bank.alpha-b
      B
    %div.label




%div.control-buttons
  %div.control-button-wrapper
    %div.control-button.tempo-up
      %i.far.fa-caret-square-up.fa-2x
    %div.label
      tempo up
  %div.control-button-wrapper
    %div.control-button.tempo-down
      %i.far.fa-caret-square-down.fa-2x
    %div.label
      tempo down
  %div.control-button-wrapper
    %div.control-button.vol-up
      %i.far.fa-caret-square-up.fa-2x
    %div.label
      vol up
  %div.control-button-wrapper
    %div.control-button.vol-down
      %i.far.fa-caret-square-down.fa-2x
    %div.label
      vol down
  %div.control-button.bank.alpha-c
    C
  %div.control-button.bank.alpha-d
    D


%div{:class => "drum-buttons"}
  - (1..12).each do |i|
    %div{:class => "drum-button_wrapper"}
      %div{:class => "drum-button"}
        %div{:class => "drum-trigger-key"} #{i}
        %div{:class=> "drum-description"} snare
        %div{:class => "drum-light"}

            
          
!
            
              $lcd-on: rgba(40, 40, 40, 1.0);
$lcd-off: rgba(40, 40, 40, 0.1);

body {
  background-color: rgb(211, 208, 215);
}

.lcd-screen {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 20px;
  padding: 20px;
  background-color: rgba(149,142,113,1.0);
  border: 8px solid rgb(0, 0, 0);
  border-radius: 5px;
  
  .lcd-container {
    border: solid 1px rgba(0, 0, 0, 0.5);
    padding: 5px;
    
    &.pattern-container {
      width: 100%;
      margin-top: 10px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      
      
      .pattern-item {
        margin: 5px;
        width: 100%;
        background-color: $lcd-off;
        height: 20px;
      }
    }
    
    svg {
      height: 100px;
      // fill: rgba(40, 40, 40, 1.0);
    }
  }
}

.drum-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  margin-top: 10px;
}

.drum-button_wrapper {
  width: 150px;
  height: 100%;
  margin: 0 auto;
  
  .drum-button {
    height: 80px;
    padding: 10px;
    background-color: rgb(20, 20, 24);
    border-radius: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    color: #ffffff;
    overflow: hidden;
    
    .drum-trigger-key {
      order: 0;
      text-transform: capitalize;
      font-weight: bold;
      font-size: 2em;
    }
    
    .drum-light {
      order: 1;
      height: 10px;
      width: 10px;
      border-radius: 50%;
      margin: 5px;
      background-color: rgba(255, 255, 255, 0.90);
      transition: all 0.1s ease;

      &.active {
        background-color: rgba(236, 15, 15, .95);
        box-shadow: 0px 0px 6px 3px rgba(216, 15, 15, .95);
        transform: scale(1.2);
      }
    }
    
    .drum-description {
      order: 2;
      flex-basis: 100%;
      text-transform: uppercase;
      color: rgb(134, 182, 206);
      font-weight: bold;
      font-size: 1.5em;
      align-self: flex-end;
    }
  }
}

.control-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-column-gap: 5px;
  grid-row-gap: 10px;
  padding: 0 15px;
  margin-bottom: 10px;
}

.control-button-wrapper {
  display: flex;
  flex-direction: column;
  
  .label {
    font-style: italic;
    font-size: 0.90em;
    color: #000000;
    text-align: center;
    text-transform: uppercase;
    margin-top: 5px;
  }
}

.control-button {
  height: 40px;
  padding: 15px 10px 10px;
  background-color: rgb(20, 20, 24);
  border-radius: 5px;
  color: rgb(244, 244, 244);
  text-align: center;
  border: 2px solid rgb(0, 0, 0);
  
  &.record {
    border-radius: 40px;
    width: 40px;
    margin: 0 auto;
    background-color: rgb(215, 55, 55);
  }
  
  &.play {
    border-radius: 40px;
    background-color: rgb(190, 100, 50);
  }
  
  &.bank {
    font-size: 2em;
    font-weight: bold;
    background-color: rgb(134, 182, 206);
    color: rgb(0, 0, 0);
  }
}

.digit,
.alpha {
    .top-center,
    .top-right,
    .top-left,
    .mid-center,
    .bottom-right,
    .bottom-left,
    .bottom-center {
      fill: $lcd-off;
    }
  
  &.alpha-a {
    .top-center,
    .top-right,
    .top-left,
    .mid-center,
    .bottom-right,
    .bottom-left {
      fill: $lcd-on;
    }
    
    .bottom-center {
      fill: $lcd-off;
    }
  }
  
  &.digit-8,
  &.alpha-b {
    .top-center,
    .top-right,
    .top-left,
    .mid-center,
    .bottom-right,
    .bottom-left,
    .bottom-center {
      fill: $lcd-on;
    }
  }

  &.alpha-c {
    .top-center,
    .top-left,
    .bottom-center,
    .bottom-left {
      fill: $lcd-on;
    }
    
    .top-right,
    .mid-center,
    .bottom-right {
      fill: $lcd-off;
    }
  }

  &.digit-0,
  &.alpha-d {
    .top-center,
    .top-left,
    .top-right,
    .bottom-center,
    .bottom-left,
    .bottom-right {
      fill: $lcd-on;
    }
    
    .mid-center {
      fill: $lcd-off;
    }
  }
  
  &.digit-1 {
    .top-right,
    .bottom-right {
      fill: $lcd-on;
    }
    
    .top-center,
    .mid-center,
    .bottom-center,
    .top-left,
    .bottom-left {
      fill: $lcd-off;
    }
  }

  &.digit-2 {
    .top-center,
    .top-right,
    .mid-center,
    .bottom-left,
    .bottom-center {
      fill: $lcd-on;
    }
    
    .top-left,
    .bottom-right {
      fill: $lcd-off;
    }
  }

  &.digit-3 {
    .top-center,
    .top-right,
    .mid-center,
    .bottom-right,
    .bottom-center {
      fill: $lcd-on;
    }
    
    .top-left,
    .bottom-left {
      fill: $lcd-off;
    }
  }

  &.digit-4 {
    .top-left,
    .top-right,
    .mid-center,
    .bottom-right {
      fill: $lcd-on;
    }
    
    .top-center,
    .bottom-center,
    .bottom-left {
      fill: $lcd-off;
    }
  }

  &.digit-5 {
    .top-center,
    .top-left,
    .mid-center,
    .bottom-right,
    .bottom-center {
      fill: $lcd-on;
    }
    
    .top-right,
    .bottom-left {
      fill: $lcd-off;
    }
  }

  &.digit-6 {
    .top-center,
    .top-left,
    .mid-center,
    .bottom-left,
    .bottom-right,
    .bottom-center {
      fill: $lcd-on;
    }
    
    .top-right {
      fill: $lcd-off;
    }
  }

  &.digit-7 {
    .top-center,
    .top-right,
    .bottom-right {
      fill: $lcd-on;
    }
    
    .top-left,
    .mid-center,
    .bottom-left,
    .bottom-center {
      fill: $lcd-off;
    }
  }

  &.digit-9 {
    .top-center,
    .top-left,
    .top-right,
    .bottom-center,
    .mid-center,
    .bottom-right {
      fill: $lcd-on;
    }
    
    .bottom-left {
      fill: $lcd-off;
    }
  }

}
            
          
!
            
              var _buttons = Array.from(document.querySelectorAll('.drum-button'));
var _bank_buttons = Array.from(document.querySelectorAll('.bank'));

var alpha_classes = ['alpha-a', 'alpha-b', 'alpha-c', 'alpha-d', ];
var alpha_index = 0;

var tempo_index = 120;

var volume_index = 75;

_buttons.forEach( (_button) => {
  _button.addEventListener('click', this.addTransistion.bind(this), false);
  _button.addEventListener('transitionend', this.removeTransition.bind(this), false);
});

_bank_buttons.forEach( _button => {
  _button.addEventListener('click', this.bankChange.bind(this), false);
});

function addTransistion ( e ) {
  var _target = e.target; 
  if(!e.target.classList.contains('drum-button')) {
   //assuming child click
    _target = e.target.parentElement;
  }

  var _light = _target.querySelector('.drum-light');
  _light.classList.add('active');
}

function removeTransition ( e ) {
  e.target.classList.remove( 'active' );
}

function bankChange ( e ) {
  var bankElement = document.querySelector('.alpha');
  var old_class = Array.from(bankElement.classList).find( cls => {
    return cls.startsWith('alpha-');
  });
  
  var new_class = Array.from(e.target.classList).find(cls => {
    return cls.startsWith('alpha-');
  });
  
  if( new_class && old_class ) {
    bankElement.classList.remove(old_class);
    bankElement.classList.add(new_class);
  }
}

var volumeUp = () => {
  if(volume_index < 99) {
    var currentVolume = volume_index.toString().split('');
    volume_index++;
    var newVolume = volume_index.toString().split('');

    if(currentVolume.length == 1) {
      currentVolume.splice(0, 0, null);
    }

    if(newVolume.length == 1) {
      newVolume.splice(0, 0, null);
    }


    //get the lcd
    var lcd = document.querySelector('.vol-lcd');

    //iterate over array and remove classes
    currentVolume.forEach( ( v, i ) => {
      //find element
      if( v !== null ) {
        var el = lcd.querySelector(`.lcd-${i}`);
        if(el) {
          el.classList.remove(`digit-${v}`);
        }
      }
    });

    //iterate over new volume and add classes
    //this can totaly be done in the first loop
    newVolume.forEach( ( v, i ) => {
      if( v !== null ) {
        var el = lcd.querySelector(`.lcd-${i}`);
        if(el) {
          el.classList.add(`digit-${v}`);
        }
      }
    });
  }
}

var volumeDown = () => {
  if(volume_index > 0) {
    var currentVolume = volume_index.toString().split('');
    volume_index--;
    var newVolume = volume_index.toString().split('');

    if(currentVolume.length == 1) {
      currentVolume.splice(0, 0, null);
    }

    if(newVolume.length == 1) {
      newVolume.splice(0, 0, null);
    }


    //get the lcd
    var lcd = document.querySelector('.vol-lcd');

    //iterate over array and remove classes
    currentVolume.forEach( ( v, i ) => {
      //find element
      if( v !== null ) {
        var el = lcd.querySelector(`.lcd-${i}`);
        if(el) {
          el.classList.remove(`digit-${v}`);
        }
      }
    });

    //iterate over new volume and add classes
    //this can totaly be done in the first loop
    newVolume.forEach( ( v, i ) => {
      if( v !== null ) {
        var el = lcd.querySelector(`.lcd-${i}`);
        if(el) {
          el.classList.add(`digit-${v}`);
        }
      }
    });
  }
}

var tempoUp = () => {
  if(tempo_index < 200) {
    var currentTempo = tempo_index.toString().split('');
    tempo_index++;
    var newTempo = tempo_index.toString().split('');

    if(currentTempo.length == 1) {
      currentTempo.splice(0, 0, null);
    }

    if(newTempo.length == 1) {
      newTempo.splice(0, 0, null);
    }

    if(currentTempo.length == 2) {
      currentTempo.splice(0, 0, null);
    }

    if(newTempo.length == 2) {
      newTempo.splice(0, 0, null);
    }


    //get the lcd
    var lcd = document.querySelector('.tempo-lcd');

    //iterate over array and remove classes
    currentTempo.forEach( ( v, i ) => {
      //find element
      if( v !== null ) {
        var el = lcd.querySelector(`.lcd-${i}`);
        if(el) {
          el.classList.remove(`digit-${v}`);
        }
      }
    });

    //iterate over new volume and add classes
    //this can totaly be done in the first loop
    newTempo.forEach( ( v, i ) => {
      if( v !== null ) {
        var el = lcd.querySelector(`.lcd-${i}`);
        if(el) {
          el.classList.add(`digit-${v}`);
        }
      }
    });
  }
}

var tempoDown = () => {
  if(tempo_index > 0) {
    var currentTempo = tempo_index.toString().split('');
    tempo_index--;
    var newTempo = tempo_index.toString().split('');

    if(currentTempo.length == 1) {
      currentTempo.splice(0, 0, null);
    }

    if(newTempo.length == 1) {
      newTempo.splice(0, 0, null);
    }

    if(currentTempo.length == 2) {
      currentTempo.splice(0, 0, null);
    }

    if(newTempo.length == 2) {
      newTempo.splice(0, 0, null);
    }


    //get the lcd
    var lcd = document.querySelector('.tempo-lcd');

    //iterate over array and remove classes
    currentTempo.forEach( ( v, i ) => {
      //find element
      if( v !== null ) {
        var el = lcd.querySelector(`.lcd-${i}`);
        if(el) {
          el.classList.remove(`digit-${v}`);
        }
      }
    });

    //iterate over new volume and add classes
    //this can totaly be done in the first loop
    newTempo.forEach( ( v, i ) => {
      if( v !== null ) {
        var el = lcd.querySelector(`.lcd-${i}`);
        if(el) {
          el.classList.add(`digit-${v}`);
        }
      }
    });
  }
}


var volumeUpButton = document.querySelector('.vol-up');
var volumeDownButton = document.querySelector('.vol-down');
var tempoUpButton = document.querySelector('.tempo-up');
var tempoDownButton = document.querySelector('.tempo-down');



volumeUpButton.addEventListener('click', this.volumeUp.bind(this), false);
volumeDownButton.addEventListener('click', this.volumeDown.bind(this), false);
tempoUpButton.addEventListener('click', this.tempoUp.bind(this), false);
tempoDownButton.addEventListener('click', this.tempoDown.bind(this), false);
            
          
!
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