Syntax Soundboard

index.html

<div class="wrapper">
  <div class="container">
    <div class="list">
      <div class="list__header">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/syntax_scott_avatar.jpg" alt="avatar">
        <div class="hostname">Scott Tolinski</div>
      </div>
      <div class="list__body">
        <div class="list__item" data-key="81">
          <div class="list__item-key">Q</div>
          <div class="list__item-quote">"Word"</div>
        </div>
        <div class="list__item" data-key="87">
          <div class="list__item-key">W</div>
          <div class="list__item-quote">"Peace ☮"</div>
        </div>
        <div class="list__item" data-key="69">
          <div class="list__item-key">E</div>
          <div class="list__item-quote">"I don't know"</div>
        </div>
        <div class="list__item" data-key="82">
          <div class="list__item-key">R</div>
          <div class="list__item-quote">"Sick 😰"</div>
        </div>
        <div class="list__item" data-key="65">
          <div class="list__item-key">A</div>
          <div class="list__item-quote">"Sick Pick"</div>
        </div>
        <div class="list__item" data-key="83">
          <div class="list__item-key">S</div>
          <div class="list__item-quote">"Tasty 🍨"</div>
        </div>
        <div class="list__item" data-key="68">
          <div class="list__item-key">D</div>
          <div class="list__item-quote">"Ridiculous"</div>
        </div>
        <div class="list__item" data-key="70">
          <div class="list__item-key">F</div>
          <div class="list__item-quote">"It's 38 inches man!"</div>
        </div>
        <div class="list__item" data-key="90">
          <div class="list__item-key">Z</div>
          <div class="list__item-quote">"Because it's long"</div>
        </div>
        <div class="list__item" data-key="88">
          <div class="list__item-key">X</div>
          <div class="list__item-quote">"Yeah, for sure"</div>
        </div>
        <div class="list__item" data-key="67">
          <div class="list__item-key">C</div>
          <div class="list__item-quote">"Mmm Hmm"</div>
        </div>
        <div class="list__item" data-key="86">
          <div class="list__item-key">V</div>
          <div class="list__item-quote">*Laughs 😆</div>
        </div>
      </div>
    </div>
    
    <div class="list">
      <div class="list__header">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/syntax_wes_avatar.jpg" alt="avatar">
        <div class="hostname">Wes Bos</div>
      </div>
      <div class="list__body">
        <div class="list__item" data-key="85">
          <div class="list__item-key">U</div>
          <div class="list__item-quote">"Exactly"</div>
        </div>
        <div class="list__item" data-key="73">
          <div class="list__item-key">I</div>
          <div class="list__item-quote">"Worrrrd"</div>
        </div>
        <div class="list__item" data-key="79">
          <div class="list__item-key">O</div>
          <div class="list__item-quote">"Sick Picks"</div>
        </div>
        <div class="list__item" data-key="80">
          <div class="list__item-key">P</div>
          <div class="list__item-quote">"That's Sweet"</div>
        </div>
        <div class="list__item" data-key="74">
          <div class="list__item-key">J</div>
          <div class="list__item-quote">"Tasty Treats 🍰"</div>
        </div>
        <div class="list__item" data-key="75">
          <div class="list__item-key">K</div>
          <div class="list__item-quote">"Weak!"</div>
        </div>
        <div class="list__item" data-key="76">
          <div class="list__item-key">L</div>
          <div class="list__item-quote">"Cool"</div>
        </div>
        <div class="list__item" data-key="186">
          <div class="list__item-key">;</div>
          <div class="list__item-quote">"Hell Yes"</div>
        </div>
        <div class="list__item" data-key="77">
          <div class="list__item-key">M</div>
          <div class="list__item-quote">"Shameless Plugs"</div>
        </div>
        <div class="list__item" data-key="188">
          <div class="list__item-key">,</div>
          <div class="list__item-quote">"Where did that come from?"</div>
        </div>
        <div class="list__item" data-key="190">
          <div class="list__item-key">.</div>
          <div class="list__item-quote">*Laugh 1 😆</div>
        </div>
        <div class="list__item" data-key="191">
          <div class="list__item-key">/</div>
          <div class="list__item-quote">*Laugh 2 😆 😆</div>
        </div>
      </div>
    </div>
    
    <div class="list">
      <div class="list__header">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/syntax_avatar.jpg" alt="avatar">
        <div class="hostname">Random</div>
      </div>
      <div class="list__body">
        <div class="list__item" data-key="49">
          <div class="list__item-key">1</div>
          <div class="list__item-quote">*Laugh Together 😆 😆</div>
        </div>
        <div class="list__item" data-key="50">
          <div class="list__item-key">2</div>
          <div class="list__item-quote">*Airhorns 🔊 🔊</div>
        </div>
        
      </div>
    </div>
    
  </div>
</div>

<audio data-key="81" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/syntax_scott_word.wav"></audio>
<audio data-key="87" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/syntax_scott_peace.wav"></audio>
<audio data-key="69" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/syntax_scott_idontknow.wav"></audio>
<audio data-key="82" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/syntax_scott_sick.wav"></audio>
<audio data-key="65" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/syntax_scott_sickpick.wav"></audio>
<audio data-key="83" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/syntax_scott_tasty.wav"></audio>
<audio data-key="68" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/syntax_scott_ridiculous.wav"></audio>
<audio data-key="70" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/syntax_scott_its38inchesman.wav"></audio>
<audio data-key="90" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/syntax_scott_becauseitslong.wav"></audio>
<audio data-key="88" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/syntax_scott_yeahforsure.wav"></audio>
<audio data-key="67" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/syntax_scott_mmmhmm.wav"></audio>
<audio data-key="86" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/syntax_scott_laugh.wav"></audio>

<audio data-key="85" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/syntax_wes_exactly.wav"></audio>
<audio data-key="73" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/syntax_wes_word.wav"></audio>
<audio data-key="79" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/syntax_wes_sickpicks.wav"></audio>
<audio data-key="80" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/syntax_wes_thatssweet.wav"></audio>
<audio data-key="74" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/syntax_wes_tastytreats.wav"></audio>
<audio data-key="75" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/syntax_wes_weak.wav"></audio>
<audio data-key="76" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/syntax_wes_cool.wav"></audio>
<audio data-key="186" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/syntax_wes_hellyes.wav"></audio>
<audio data-key="77" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/syntax_wes_shamelessplugs.wav"></audio>
<audio data-key="188" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/syntax_wes_wheredidthatcomefrom.wav"></audio>
<audio data-key="190" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/syntax_wes_laugh.wav"></audio>
<audio data-key="191" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/syntax_wes_laugh2.wav"></audio>

<audio data-key="49" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/syntax_random_bothlaugh.wav"></audio>
<audio data-key="50" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/syntax_random_airhorns.wav"></audio>

script.js

(function() {
  
  function keyDownHandler(e) {
    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
    const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
    playSound(audio, key);
  }
  
  function clickHandler(e) {
    const audio = document.querySelector(`audio[data-key="${this.dataset.key}"]`);
    const key = document.querySelector(`div[data-key="${this.dataset.key}"]`);
    playSound(audio, key);
  }
  
  function playSound(audio, key) {    
    if (!audio) return;
    key.classList.add('playing');
    audio.currentTime = 0;
    audio.play();
  }
  
  function removeTransition(e) {
    // if (e.propertyName !== 'transform') return;
    e.target.classList.remove('playing');
  }
  
  const keys = Array.from(document.querySelectorAll('.list__item'));
  keys.forEach(key => key.addEventListener('transitionend', removeTransition));
  window.addEventListener('keydown', keyDownHandler);
  
  keys.forEach(key => key.addEventListener('click', clickHandler));
  
})();

style.scss

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);

body {
  box-sizing: border-box;
  color: #3D4852;
  background-color: #DFBB6A;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='32' viewBox='0 0 16 32'%3E%3Cg fill='%237e7e80' fill-opacity='0.4'%3E%3Cpath fill-rule='evenodd' d='M0 24h4v2H0v-2zm0 4h6v2H0v-2zm0-8h2v2H0v-2zM0 0h4v2H0V0zm0 4h2v2H0V4zm16 20h-6v2h6v-2zm0 4H8v2h8v-2zm0-8h-4v2h4v-2zm0-20h-6v2h6V0zm0 4h-4v2h4V4zm-2 12h2v2h-2v-2zm0-8h2v2h-2V8zM2 8h10v2H2V8zm0 8h10v2H2v-2zm-2-4h14v2H0v-2zm4-8h6v2H4V4zm0 16h6v2H4v-2zM6 0h2v2H6V0zm0 24h2v2H6v-2z'/%3E%3C/g%3E%3C/svg%3E");
  font-family: 'Open Sans', Arial, sans-serif;
  line-height: 1.5;
  font-size: 14px;
}

.container {
  width: 1200px;
  margin: 40px auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 30px;
}

.list {
  
  &__header {
    background: #E2E2E2;
    padding: 15px 20px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    display: flex;
    align-items: center;
    
    img {
      border-radius: 50%;
      width: 50px;
    }
    
    .hostname {
      margin-left: 12px;
      font-weight: bold;
      font-size: 20px;
    }
  }
  
  &__body {
    background: white;
    padding: 20px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
}

.list__item {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 17px;
  cursor: pointer;
  transition: all .25s ease;
  
  &:hover {
    background: #E2E2E2;
  }
  
  &-key {
    border: 1px solid #ccc;
    background: #F3F3F3;
    line-height: 1;
    font-weight: bold;
    border-radius: 5px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  &-quote {
    font-weight: bold;
    margin-left: 14px;
  }
}

.playing {
  border-color: #ffc600;
  box-shadow: 0 0 1rem #ffc600;
  animation: 0.05s infinite alternate waggle;
}

@keyframes waggle {
  from { transform: rotate(4grad) }
  to { transform: rotate(-4grad) }
}


// Responsive 

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
  .container {
    grid-template-columns: 1fr 1fr;
    width: 90%;
  }
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
  
  .container {
    grid-template-columns: 1fr;
  }
  
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {

}

syntax-soundboard.markdown

Syntax Soundboard

A soundboard made up of sayings from the Syntax Podcast with Scott Tolinksi and Wes Bos.

A Pen by David Hemphill on CodePen.

License.