JSFiddle

  • Canvas Clip Animation #2 is the latest revision

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

    function handleClick() {
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');
    
      ctx.fillStyle = "#f03";
      var recW = 150;
    
      function animate2 ...
  • Tone.js Test #6 is the latest revision

    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 + JSX

    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>
  • Hamburger Pop Navigation

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

    const navBurger = document.getElementById('burger');
    
    function handleClick() {
    	if (this.classList.contains('active')) {
      	this.classList.remove('active');
        this.classList.add('inactive ...
  • 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 #36 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="">