A soundboard made up of sayings from the Syntax Podcast with Scott Tolinksi and Wes Bos.
A Pen by David Hemphill on CodePen.
Created
January 29, 2018 16:23
-
-
Save davidhemphill/73f7d4162b4363e0b3434b2e84b85a19 to your computer and use it in GitHub Desktop.
Syntax Soundboard
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (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)); | |
| })(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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) { | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment