brookr/deck-o-cards.html

## deck-o-cards.html
<!doctype html>
<html>
  <head>
    <title>
      Deck of Cards
    </title>
    <style>
      body {
        font-family: arial;
      }
      ul {
        color: white;
        padding: 1em;
        width: 52em;
        background-color: purple;
      }
      li {
        display: inline-block;
        width: 4em;
        text-align: center;
      }
      .swapping {
        background-color: yellow;
        color: black;
      }
    </style>
  </head>
  <body>
    <h1>Deck of Cards</h1>
    <ul id="deck" class="collection">
    </ul>
    <button id="shuffle">Shuffle now!</button>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
      function shuffle(m) {
        // TODO: Implement Fisher-Yates shuffle
      };

      function Deck() {
        var theDeck = this;
        this.suits = ['H', 'C', 'D', 'S'];
        this.ranks = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];
        this.addCard = function(suit, rank) {
          var card = new Card(suit, rank)
          $('#deck').append(card.toHTML());
        };
        $.each(this.suits, function(index, suit){
          $.each(theDeck.ranks, function(index, rank){
            theDeck.addCard(suit, rank);
          });
        });
      }

      function Card(suit, rank) {
        this.suit = suit;
        this.rank = rank;
        this.toHTML = function() {
          return '<li class="card">' + this.suit + '-' + this.rank + '</li>';
        };
      }

      $('#shuffle').on('click', function() {
        shuffle();
      });

      var deck = new Deck();
    </script>
  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>
	Deck of Cards
	</title>
	<style>
	body {
	font-family: arial;
	}
	ul {
	color: white;
	padding: 1em;
	width: 52em;
	background-color: purple;
	}
	li {
	display: inline-block;
	width: 4em;
	text-align: center;
	}
	.swapping {
	background-color: yellow;
	color: black;
	}
	</style>
	</head>
	<body>
	<h1>Deck of Cards</h1>
	<ul id="deck" class="collection">
	</ul>
	<button id="shuffle">Shuffle now!</button>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script>
	function shuffle(m) {
	// TODO: Implement Fisher-Yates shuffle
	};

	function Deck() {
	var theDeck = this;
	this.suits = ['H', 'C', 'D', 'S'];
	this.ranks = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];
	this.addCard = function(suit, rank) {
	var card = new Card(suit, rank)
	$('#deck').append(card.toHTML());
	};
	$.each(this.suits, function(index, suit){
	$.each(theDeck.ranks, function(index, rank){
	theDeck.addCard(suit, rank);
	});
	});
	}

	function Card(suit, rank) {
	this.suit = suit;
	this.rank = rank;
	this.toHTML = function() {
	return '<li class="card">' + this.suit + '-' + this.rank + '</li>';
	};
	}

	$('#shuffle').on('click', function() {
	shuffle();
	});

	var deck = new Deck();
	</script>
	</body>
	</html>