A soundboard made up of sayings from the Syntax Podcast with Scott Tolinksi and Wes Bos.
A Pen by David Hemphill on CodePen.
<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> |
(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)); | |
})(); |
@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) { | |
} |
A soundboard made up of sayings from the Syntax Podcast with Scott Tolinksi and Wes Bos.
A Pen by David Hemphill on CodePen.