JSFiddle

  • Command Pattern #1 is the latest revision

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

    var outputList = document.querySelector('[data-output]');
    
    /**
    *  commands is a map of command objects.
    */
    var commands = {
    
        Undo: function () {
            commandManager.invokeCommand(this);
        },
    
        Redo ...
  • JavaScript Calculator

    my first project, thanks Ian for teaching me.

    var Calculator = function() {
        this.total = 0;
        this.current = 0;
        this.operation = null;
        this.fractionExp = 0;
    };
    
    Calculator.prototype = {
        add: function() {
            this ...
  • infinite scroll handler #4 is the latest revision

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

    document.addEventListener("scroll", function (event) {
        //checkForNewDiv();
    });
    
    const debounce = (fn, time) => {
      let timeout;
    
      return function() {    
        clearTimeout(timeout);
        timeout = setTimeout(() => fn.apply ...
  • Underscore.js throttle vs debounce example

    An example test visually demonstrating the difference between Underscore.js's throttle() and debounce(), the latter with the "immediate" parameter set true.

    $(function () {
        function changeMeter (ev) {
            var $ul = $(ev.target).closest("ul"),
                numLi = $("li", $ul).length,
                $on = $("li.on", $ul),
                numOn = $on ...
  • curry es6

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

    function curry(f, ...args) {
      if (args.length >= f.length) {
        return f(...args);
      }
      else {
        return (...next) => curry(f, ...args, ...next);
      }
    }
  • Awesome Like Button #3 is the latest revision

    jQuery Compat (edge), HTML, CSS, JavaScript

    $('.like').click(function(){
        var text = $('.like span').text();
        if( text == "Like" ){
           $('.like span').text('Unlike');
           $('.like').addClass('liked');
        }else{
            $('.like ...
  • Awesome Like Button

    jQuery Compat (edge), HTML, CSS, JavaScript

    $('.like').click(function(){
        var text = $('.like span').text();
        if( text == "Like" ){
           $('.like span').text('Unlike');
           $('.like').addClass('liked');
        }else{
            $('.like ...
  • Example

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

    document.getElementById('container').onscroll = function() {
      console.log("scrolling");
    };
  • linked calculator #1 is the latest revision

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

    class Stack {
      constructor() {
        this.stack = [];
        this[Symbol.iterator] = function *() {
          for (const el of this.stack) {
            yield el;
          }
        }
      }
      isEmpty() {
        return this ...
  • HTML and CSS tooltip

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

    <div>
    
      <h1>
        HTML and CSS tooltip
      </h1>
    <a href="#" title="This is some information for our tooltip." class="tooltip"><span title="">CSS3 Tooltip</span></a>
    </div>