JSFiddle

  • Pulsing CSS Concentric Circles #6 is the latest revision

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

    <div class="container">
      <div class="ring ring1"></div>
      <div class="ring ring2"></div>
      <div class="ring ring3"></div>
      <div class="ring ring4"></div>
      <div class="ring ring5"></div>
      <div class="ring ring6"></div>
      <div class="ring ring7"></div>
      <div class="ring ring8"></div>
      <div class="ring ring9"></div>
      <div class="ring ring10"></div>
      <div class="ring ring11"></div>
      <div class="ring ring12"></div>
    </div>
  • Mouse move BG Change

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

    var $element = document.getElementById('container');
    var mouseCoordinates = {};
    
    function handleMouseMove(event){
        mouseCoordinates.x = event.clientX;
        mouseCoordinates.y = event.clientY;
        mouseCoordinates.hypotenuse ...
  • Right Arrow to Close Transition

    jQuery 2.2.1, HTML, SCSS, JavaScript

    $('.content').hover(function(){
    	$('.close').addClass('active');
    }, function(){
    	$('.close').removeClass('active');
    })
  • Truthiness - Double Bang

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

    var one = null;
    var two = undefined;
    var three = 0;
    var four = '';
    var five = 'Foo Bar';
    var six = true;
    var seven ...
  • FAQ Test

    jQuery 2.2.1, HTML, SCSS, JavaScript

    $('li').click(function() {
      if ($(this).hasClass('active')) {
        $(this).removeClass('active');
      } else {
        $(this).addClass('active');
      }
    });
    
  • Card UI

    via https://dribbble.com/shots/2537470-Article-Cards

    // Based on designs via https://dribbble.com/shots/2537470-Article-Cards
  • Bar Graph

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

    <section class="graph">
      <ul class="y-axis">
        <li>
          <span class="label">10</span>
        </li>
        <li>
          <span class="label">8</span>
        </li>
        <li>
          <span class="label">6</span>
        </li>
        <li>
          <span class="label">4</span>
        </li>
        <li>
          <span class="label">2</span>
        </li>
      </ul>
      <ul class="bars">
        <li class="bar-group" data-label="FEB 7">
          <div class="bar redBG" style="height: 30%; top: 70%;"></div>
          <div class="bar blueBG" style="height: 15%; top: 85%;"></div>
        </li>
        <li class="bar-group" data-label="FEB 8">
          <div class="bar redBG" style="height: 20%; top: 80%;"></div>
          <div class="bar blueBG" style="height: 15%; top: 85%;"></div>
        </li>
      </ul>
    </section>
    
  • Truthiness

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

    var truthy = true;
    var falsey = false;
    
    // ELEMENTS
    var TT = document.getElementById('TT');
    var TF = document.getElementById('TF');
    var FF = document ...
  • Date Selector Options

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

    var trackedInput = $(".multi-number-container input");
    
    
    $(".multi-number-container input").keyup(function() {
      if (this.value.length == this.maxLength) {
        $(this).next('.inputs').focus();
      }
    });
    
    var today ...
  • Date Dots

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

    <div class="days">
      <div class="day event calendar-day-2016-01-20 calendar-dow-3 streak-surrounded">
        <span>20</span>
        <div class="goals-container">
          <div class="goals">
              <span class="goal streak-end goal-two">goal-two</span>
              <span class="goal streak-surrounded goal-one">goal-one</span>
              <span class="goal streak-surrounded goal-three">goal-three</span>
              <span class="goal streak-surrounded goal-four">goal-four</span>
              <span class="goal streak-surrounded goal-five">goal-five</span>
    <!--           <span class="goal streak-surrounded goal-six">goal-six</span> -->
          </div>
        </div>
      </div>
    </div>