HTML, CSS and JavaScript playground

var deal = function () {

//Player hands
	var north_hand = [];
	var east_hand  = [];
	var south_hand = [];
	var west_hand  = [];

//Creating the deck
	var deck = [{'suit': 's', 'value': 'A'}, {'suit': 's', 'value': 'K'},
				{'suit': 's', 'value': 'Q'}, {'suit': 's', 'value': 'J'},
				{'suit': 's', 'value': 'T'}, {'suit': 's', 'value': '9'},
				{'suit': 's', 'value': '8'}, {'suit': 's', 'value': '7'},
				{'suit': 's', 'value': '6'}, {'suit': 's', 'value': '5'},
				{'suit': 's', 'value': '4'}, {'suit': 's', 'value': '3'},
				{'suit': 's', 'value': '2'},
				{'suit': 'h', 'value': 'A'}, {'suit': 'h', 'value': 'K'},
				{'suit': 'h', 'value': 'Q'}, {'suit': 'h', 'value': 'J'},
				{'suit': 'h', 'value': 'T'}, {'suit': 'h', 'value': '9'},
				{'suit': 'h', 'value': '8'}, {'suit': 'h', 'value': '7'},
				{'suit': 'h', 'value': '6'}, {'suit': 'h', 'value': '5'},
				{'suit': 'h', 'value': '4'}, {'suit': 'h', 'value': '3'},
				{'suit': 'h', 'value': '2'},
				{'suit': 'd', 'value': 'A'}, {'suit': 'd', 'value': 'K'},
				{'suit': 'd', 'value': 'Q'}, {'suit': 'd', 'value': 'J'},
				{'suit': 'd', 'value': 'T'}, {'suit': 'd', 'value': '9'},
				{'suit': 'd', 'value': '8'}, {'suit': 'd', 'value': '7'},
				{'suit': 'd', 'value': '6'}, {'suit': 'd', 'value': '5'},
				{'suit': 'd', 'value': '4'}, {'suit': 'd', 'value': '3'},
				{'suit': 'd', 'value': '2'},
				{'suit': 'c', 'value': 'A'}, {'suit': 'c', 'value': 'K'},
				{'suit': 'c', 'value': 'Q'}, {'suit': 'c', 'value': 'J'},
				{'suit': 'c', 'value': 'T'}, {'suit': 'c', 'value': '9'},
				{'suit': 'c', 'value': '8'}, {'suit': 'c', 'value': '7'},
				{'suit': 'c', 'value': '6'}, {'suit': 'c', 'value': '5'},
				{'suit': 'c', 'value': '4'}, {'suit': 'c', 'value': '3'},
				{'suit': 'c', 'value': '2'}];

//Call the shffleDeck function
	shuffleDeck(deck);
	
	//Slice the deck up
	north_hand = deck.slice(0, 13);
	east_hand = deck.slice(13, 26);
	south_hand = deck.slice(26, 39);
	west_hand = deck.slice(39, 52);

console.log(north_hand);
  
	//Getting the elements i want to add the cards to
	var north_spades = document.getElementById('p1_spades');
	var north_hearts = document.getElementById('p1_hearts');
	var north_diamonds = document.getElementById('p1_diamonds');
	var north_clubs = document.getElementById('p1_clubs');

for (var i = 0; i < north_hand.length; i++) {
		if (north_hand[i].suit == "s") {
			north_spades.innerHTML += north_hand[i].value;
		} else if (north_hand[i].suit == "h") {
			north_hearts.innerHTML += north_hand[i].value;
		} else if (north_hand[i].suit == "d") {
			north_diamonds.innerHTML += north_hand[i].value;
		} else {
			north_clubs.innerHTML += north_hand[i].value;
		}
	}
};

// Based on Fisher-Yates algoritm (Shuffle)
function shuffleDeck(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;
}