JSFiddle

  • Snakes and Ladders

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

    // https://en.wikipedia.org/wiki/Snakes_and_Ladders
    var board = new Board(10, 10);
    
    /**
     * @param {Number} x Max X of the grid ...
  • Poker

    No-Library (pure JS), HTML, SCSS, Babel + JSX

    let runTests = true;
    let gameCount = 1; // Set to 0 to disable, set to 5000 to see why Vegas is a ...
  • Draggable, droppable, and sortable list #8 is the latest revision

    http://www.knockmeout.net/2011/05/dragging-dropping-and-sorting-with.html

    function Task(name) {
        this.name = ko.observable(name);
    }
    var viewModel = {
        iterations: ko.observableArray([
        	ko.observableArray([
            new Task("Build containers"),
            new ...
  • Snapping of objects #1 is the latest revision

    FabricJS 1.4.0, HTML, CSS, JavaScript

    window.canvas = new fabric.Canvas('fabriccanvas');
    window.counter = 0;
    var newleft = 0;
    var edgedetection = 40; //pixels to snap
    var count ...
  • String Substitution

    Replace variables in a string

    /* Define your substitution pattern {$n} is default. */
    function StringSubstituter(regex) {
    	regex = regex || /\{\$(\d+)\}/g;
      /**
       * Replace references in a string with ...
  • Dungeon Roller / Character Creator #38 is the latest revision

    To accompany various d20 games.

    'use strict';
    
    /** @namespace */
    var DungeonGame = {
      /** @constructor */
    	Die: function (sides) {
        this.sides = sides;
        this.roll = function () {
          return Math.floor((Math.random ...
  • AngularJS textarea maxlength countdown #3 is the latest revision

    Will countdown to the number of characters remaining in a textarea with maxlength attribute.

    // http://briantford.com/blog/angular-hacking-core
    (function () {
      var originalModule = angular.module;
      angular.module = function () {
        var module = originalModule.apply(this, arguments);
        module ...
  • AngularJS Clock Directive #6 is the latest revision

    A simple clock for AngularJS.

    angular.module('app',[]).directive('clock', function ($interval) {
      return {
        scope: true, // isolate
        transclude: true, // bring in any text or elements
        template ...
  • Angular formatted currency #3 is the latest revision

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

    angular
    .module('app', [])
    .controller('myController', function ($scope, Logger) {
        Logger.log('Controller Initialized');
        $scope.bills = [
            {amount: 100},
            {amount: 450},
            {amount: -12 ...
  • Accessible Multi-field Date Input

    Just an idea, I would generally use a date field but the concept is out in the wild and this is a sane way to provide ADA compliance without rewriting your inputs to masked fields or whatnot.

    <form>
        <label for="month">
          Your Date of Birth: (MM/DD/YYYY)
          <span class="assistive-info">Your Birth Month</span>
        </label>
        <input type="number" max="12" id="month" placeholder="MM" size="2" maxlength="2" />
        <label for="day" class="assistive-info">Your Birth Day</label>
        <input type="number" max="31" id="day" placeholder="DD" size="2" maxlength="2" />
        <label for="year" class="assistive-info">Your Birth Year</label>
        <input type="number" max="2016" id="year" placeholder="YYYY" size="4" maxlength="4" />
    </form>