shiftyp/app.css

## app.css
*,
*:before,
*:after {
  box-sizing: border-box;
}

.hand,
.deck {
  overflow: hidden;
}
.card {
  margin: 10px;
  text-align: center;
  padding: 10px;
  width: 100px;
  height: 150px;
  float: left;
  position: relative;
}

.diamonds,
.hearts {
  background: #E74C3C;
}

.spades,
.clubs {
  background: #2C3E50;
  color: white;
}

.hearts:before,
.diamonds:before,
.spades:before,
.clubs:before {
  display: block;
  position: absolute;
  bottom: 10px;
  right: 25px;
  font-size: 64px;
  width: 50px;
}

.hearts:before {
  content: '\2665';
}

.diamonds:before {
  content: '\2666';
}

.clubs:before {
  content: '\2663';
  color: white;
}

.spades:before {
  content: '\2660';
  color: white;
}

## app.js
$('.blackjack').blackjack();

## index.html
<!DOCTYPE html>
<html>
<head>
  <title>jQuery Plugin</title>
  <link href="./app.css" rel="stylesheet">
</head>
<body>

  <div class="blackjack">
    <div class="controls"></div>
    <div class="hand"></div>
    <div class="deck"></div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
  <script src="./plugin.js"></script>
  <script src="./app.js"></script>


</body>
</html>

## plugin.js
/*
 *  jquery-boilerplate - v3.4.0
 *  A jump-start for jQuery plugins development.
 *  http://jqueryboilerplate.com
 *
 *  Made by Zeno Rocha
 *  Under MIT License
 */
// the semi-colon before function invocation is a safety net against concatenated
// scripts and/or other plugins which may not be closed properly.
;(function ( $, window, document, undefined ) {

  "use strict";

  var ranks = {
      ACE: 1,
      TWO: 2,
      THREE: 3,
      FOUR: 4,
      FIVE: 5,
      SIX: 6,
      SEVEN: 7,
      EIGHT: 8,
      NINE: 9,
      TEN: 10,
      JACK: 10,
      QUEEN: 10,
      KING: 10
    };


    var suits = {
      HEARTS: 'hearts',
      CLUBS: 'clubs',
      SPADES: 'spades',
      DIAMONDS: 'diamonds'
    };

    function makeDeck() {
        var deck = [];

        // { suit: 'HEARTS', rank: 'ACE' }
        Object.keys(suits).forEach(function(suit) {

            Object.keys(ranks).forEach(function(rank) {

                deck.push({ suit: suit, rank: rank });

            });

        });

        return deck;
    }

    function shuffle(array) {
      var m = array.length, t, i;

      // While there remain elements to shuffle…
      while (m) {

        // Pick a remaining element…
        i = Math.floor(Math.random() * m--);

        // And swap it with the current element.
        t = array[m];
        array[m] = array[i];
        array[i] = t;
      }

      return array;
    }

    // undefined is used here as the undefined global variable in ECMAScript 3 is
    // mutable (ie. it can be changed by someone else). undefined isn't really being
    // passed in so we can ensure the value of it is truly undefined. In ES5, undefined
    // can no longer be modified.

    // window and document are passed through as local variable rather than global
    // as this (slightly) quickens the resolution process and can be more efficiently
    // minified (especially when both are regularly referenced in your plugin).

    // Create the defaults once
    var pluginName = "blackjack",
        defaults = {};

    // The actual plugin constructor
    function Plugin ( element, options ) {
        this.element = element;
        this.$element = $(element);
        // jQuery has an extend method which merges the contents of two or
        // more objects, storing the result in the first object. The first object
        // is generally empty as we don't want to alter the default options for
        // future instances of the plugin
        this.settings = $.extend( {}, defaults, options );
        this._defaults = defaults;
        this._name = pluginName;
        this.deck = makeDeck();
        this.hand = [];
        this.init();
    }

    // Avoid Plugin.prototype conflicts
    $.extend(Plugin.prototype, {
        init: function () {
              this.shuffle();
              // this.displayCard( this.deck[0] )

              var shuffleHTML = '<button class="shuffle">shuffle</button>';
              this.$element.find('.controls').append(shuffleHTML);
              this.$element.find('.shuffle').on('click', function() {
                this.shuffle();
                this.displayDeck();
              }.bind(this));

              this.deal(5);
              this.displayHand();
              this.displayDeck();
        },

        shuffle: function() {
            this.deck = shuffle( this.deck );
        },

        deal: function(howMany) {

          if (howMany > this.deck.length) {
              howMany = this.deck.length;
          }

          for(var i = 0; i < howMany; i++) {

            this.hand.push( this.deck.pop() );
          }
          // this.displayDeck();
          console.log(this.deck.length);
        },

        displayCard: function(card, selector) {
            var rank = card.rank;
            var suit = card.suit;

            var cardHTML =
                '<div class="card ' + rank.toLowerCase() + ' ' + suit.toLowerCase() + '">' +
                    '<span class="rank">' + rank + '</span>' +
                        ' of ' +
                    '<span class="suit">' + suit + '</span>' +
                '</div>';

            this.$element.find(selector).append(cardHTML);
        },

        displayCards: function(cards, selector) {
          this.$element.find(selector).empty();
          cards.forEach(function(card) {
            this.displayCard(card, selector);
          }.bind(this));
        },

        displayDeck: function() {
            this.displayCards(this.deck, '.deck');
        },

        displayHand: function() {
            this.displayCards(this.hand, '.hand');
        }

    });

    // A really lightweight plugin wrapper around the constructor,
    // preventing against multiple instantiations
    $.fn[ pluginName ] = function ( options ) {
        return this.each(function() {
            if ( !$.data( this, "plugin_" + pluginName ) ) {
                $.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
            }
        });
    };

})( jQuery, window, document );
	*,
	*:before,
	*:after {
	box-sizing: border-box;
	}

	.hand,
	.deck {
	overflow: hidden;
	}
	.card {
	margin: 10px;
	text-align: center;
	padding: 10px;
	width: 100px;
	height: 150px;
	float: left;
	position: relative;
	}

	.diamonds,
	.hearts {
	background: #E74C3C;
	}

	.spades,
	.clubs {
	background: #2C3E50;
	color: white;
	}

	.hearts:before,
	.diamonds:before,
	.spades:before,
	.clubs:before {
	display: block;
	position: absolute;
	bottom: 10px;
	right: 25px;
	font-size: 64px;
	width: 50px;
	}

	.hearts:before {
	content: '\2665';
	}

	.diamonds:before {
	content: '\2666';
	}

	.clubs:before {
	content: '\2663';
	color: white;
	}

	.spades:before {
	content: '\2660';
	color: white;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<title>jQuery Plugin</title>
	<link href="./app.css" rel="stylesheet">
	</head>
	<body>

	<div class="blackjack">
	<div class="controls"></div>
	<div class="hand"></div>
	<div class="deck"></div>
	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
	<script src="./plugin.js"></script>
	<script src="./app.js"></script>


	</body>
	</html>
	/*
	* jquery-boilerplate - v3.4.0
	* A jump-start for jQuery plugins development.
	* http://jqueryboilerplate.com
	*
	* Made by Zeno Rocha
	* Under MIT License
	*/
	// the semi-colon before function invocation is a safety net against concatenated
	// scripts and/or other plugins which may not be closed properly.
	;(function ( $, window, document, undefined ) {

	"use strict";

	var ranks = {
	ACE: 1,
	TWO: 2,
	THREE: 3,
	FOUR: 4,
	FIVE: 5,
	SIX: 6,
	SEVEN: 7,
	EIGHT: 8,
	NINE: 9,
	TEN: 10,
	JACK: 10,
	QUEEN: 10,
	KING: 10
	};


	var suits = {
	HEARTS: 'hearts',
	CLUBS: 'clubs',
	SPADES: 'spades',
	DIAMONDS: 'diamonds'
	};

	function makeDeck() {
	var deck = [];

	// { suit: 'HEARTS', rank: 'ACE' }
	Object.keys(suits).forEach(function(suit) {

	Object.keys(ranks).forEach(function(rank) {

	deck.push({ suit: suit, rank: rank });

	});

	});

	return deck;
	}

	function shuffle(array) {
	var m = array.length, t, i;

	// While there remain elements to shuffle…
	while (m) {

	// Pick a remaining element…
	i = Math.floor(Math.random() * m--);

	// And swap it with the current element.
	t = array[m];
	array[m] = array[i];
	array[i] = t;
	}

	return array;
	}

	// undefined is used here as the undefined global variable in ECMAScript 3 is
	// mutable (ie. it can be changed by someone else). undefined isn't really being
	// passed in so we can ensure the value of it is truly undefined. In ES5, undefined
	// can no longer be modified.

	// window and document are passed through as local variable rather than global
	// as this (slightly) quickens the resolution process and can be more efficiently
	// minified (especially when both are regularly referenced in your plugin).

	// Create the defaults once
	var pluginName = "blackjack",
	defaults = {};

	// The actual plugin constructor
	function Plugin ( element, options ) {
	this.element = element;
	this.$element = $(element);
	// jQuery has an extend method which merges the contents of two or
	// more objects, storing the result in the first object. The first object
	// is generally empty as we don't want to alter the default options for
	// future instances of the plugin
	this.settings = $.extend( {}, defaults, options );
	this._defaults = defaults;
	this._name = pluginName;
	this.deck = makeDeck();
	this.hand = [];
	this.init();
	}

	// Avoid Plugin.prototype conflicts
	$.extend(Plugin.prototype, {
	init: function () {
	this.shuffle();
	// this.displayCard( this.deck[0] )

	var shuffleHTML = '<button class="shuffle">shuffle</button>';
	this.$element.find('.controls').append(shuffleHTML);
	this.$element.find('.shuffle').on('click', function() {
	this.shuffle();
	this.displayDeck();
	}.bind(this));

	this.deal(5);
	this.displayHand();
	this.displayDeck();
	},

	shuffle: function() {
	this.deck = shuffle( this.deck );
	},

	deal: function(howMany) {

	if (howMany > this.deck.length) {
	howMany = this.deck.length;
	}

	for(var i = 0; i < howMany; i++) {

	this.hand.push( this.deck.pop() );
	}
	// this.displayDeck();
	console.log(this.deck.length);
	},

	displayCard: function(card, selector) {
	var rank = card.rank;
	var suit = card.suit;

	var cardHTML =
	'<div class="card ' + rank.toLowerCase() + ' ' + suit.toLowerCase() + '">' +
	'<span class="rank">' + rank + '</span>' +
	' of ' +
	'<span class="suit">' + suit + '</span>' +
	'</div>';

	this.$element.find(selector).append(cardHTML);
	},

	displayCards: function(cards, selector) {
	this.$element.find(selector).empty();
	cards.forEach(function(card) {
	this.displayCard(card, selector);
	}.bind(this));
	},

	displayDeck: function() {
	this.displayCards(this.deck, '.deck');
	},

	displayHand: function() {
	this.displayCards(this.hand, '.hand');
	}

	});

	// A really lightweight plugin wrapper around the constructor,
	// preventing against multiple instantiations
	$.fn[ pluginName ] = function ( options ) {
	return this.each(function() {
	if ( !$.data( this, "plugin_" + pluginName ) ) {
	$.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
	}
	});
	};

	})( jQuery, window, document );