JSFiddle

  • Tone.js Test

    Tone.js example

    var synth = new Tone.AMSynth().toMaster()
    
    //attach a listener to all of the buttons
    document.querySelectorAll('button').forEach(function(button ...
  • Swatches

    No-Library (pure JS), HTML, SCSS, JavaScript

    // Click to copy the value in the input
    
    // click again, double-click, or right click to cycle what the input shows ...
  • React Form Comparison

    jQuery (edge), HTML, CSS, Babel

    const usStates = [
      {
        "abbreviation": 'AL',
        "stateName": 'Alabama'
      },
      {
        "abbreviation": 'AK',
        "stateName": 'Alaska'
      },
      {
        "abbreviation": 'AZ',
        "stateName": 'Arizona'
      },
      {
        "abbreviation": 'AR',
        "stateName": 'Arkansas'
      },
      {
        "abbreviation": 'CA ...
  • Flexbox Space Between fallback

    No-Library (pure JS), HTML, SCSS, JavaScript

    <div class="container">
      <div class="item">AJKHajhaS</div>
      <div class="item">AJKH</div>
      <div class="item">AJKHASDFASDFASDFaS</div>
      <div class="item">haS</div>
    </div>
    
    <br>
    <hr>
    <br>
    
    <div class="container-t">
      <div class="item-t">AJKHajhaS</div>
      <div class="spacer"></div>
      <div class="item-t">AJKH</div>
      <div class="spacer"></div>
      <div class="item-t">AJKHASDFASDFASDFaS</div>
      <div class="spacer"></div>
      <div class="item-t2">haS</div>
    </div>
  • Box Rotation

    jQuery (edge), HTML, SCSS, JavaScript

    // Inspiration / Copy/Paste Source: https://desandro.github.io/3dtransforms/docs/rectangular-prism.html
    
    var boxDimensions = {
    	width: 172,
      height: 260,
      depth: 64 ...
  • Star Rating System #5 is the latest revision

    jQuery (edge), HTML, SCSS, JavaScript

    $("#articleRating > .rating").rateYo({
      rating: 3.6,
      starWidth: '25px',
      normalFill: '#d7d7d7', // light gray
      ratedFill: '#28b350',  // green
      readOnly: true
    });
    
    $("#articleRating .tooltip .rating ...
  • Candidate Cards

    No-Library (pure JS), HTML, SCSS, JavaScript

    <section class="card">
      <header style="background-image: url('https://a.hrc.onl/secretary/img/soc/bio/bio-photo-31.jpg')">
      </header>
      <article>
        <h2 class="party blue">Democratic Party</h2>
        <h1 class="headline">Hillary Clinton</h1>
      </article>
    </section>
    
    
    <section class="card">
      <header style="background-image: url('http://www.ew.com/sites/default/files/styles/tout_image_612x380/public/i/2013/01/11/last-week-tonight_612x380_0.jpg?itok=VaC-vvSJ')">
      </header>
      <article>
        <h2 class="party red">Republican Party</h2>
        <h1 class="headline">Donald<br>Trump</h1>
      </article>
    </section>
    
    
    <section class="card">
      <header style="background-image: url('http://ell.h-cdn.co/assets/15/28/980x490/landscape-1436208126-jill-stein-b.jpg')">
      </header>
      <article>
        <h2 class="party green">Green Party</h2>
        <h1 class="headline">Jill<br>Stein</h1>
      </article>
    </section>
  • Custom CSS Arrow

    No-Library (pure JS), HTML, SCSS, JavaScript

    <div class="arrow"></div>
    <img src="file:///Users/patricksullivan/Desktop/Screen%20Shot%202016-08-08%20at%201.53.11%20PM.png" alt="">
  • CSS Carousel

    Basic CSS for carousel layout prior to initializing the actual JS-based carousel.

    <div class="carousel-container">
      <ul class="carousel">
      <li>
        <img src="http://placehold.it/400x225/5191FD/ffffff" alt="">
      </li>
        <li>
        <img src="http://placehold.it/400x225/1647E9/ffffff" alt="">
      </li>
        <li>
        <img src="http://placehold.it/400x225/3C74F7/ffffff" alt="">
      </li>
        <li>
        <img src="http://placehold.it/400x225/1C54F5/ffffff" alt="">
      </li>
        <li>
        <img src="http://placehold.it/400x225/133AD9/ffffff" alt="">
      </li>
    </ul>
    </div>
  • Custom Range Input

    No-Library (pure JS), HTML, SCSS, JavaScript

    <input type="range" class="scrubber">