[JQuery] Random Card Generator

[dday9]

The following code will generate a random playing card. The possible values are 2, 3, 4, 5, 6, 7, 8 ,9 , 10, Jack, Queen, and King whereas the possible suits are spade, heart, club, and diamond. The CSS height/width dimensions for the card are taken from the standard card sizes, so if you were to hold up a real card to the screen the size should match up.

HTML

<div class="card">
  <div class="cardLeft">
    <h2></h2>
  </div>
  <div class="cardCenter">
    <h2></h2>
  </div>
  <div class="cardRight">
    <h2></h2>
  </div>
</div>

<input id="btnDraw" type="button" value="Draw" />

CSS

.card {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  
  border: 1px solid #000;
  border-radius: 5px;
  height: 3.5in;
  padding: 0 .5em;
  text-align: center;
  width: 2.5in;
}

.cardLeft {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-align-self: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start;
}

.cardCenter {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
  
  font-size: 1.75in;
}

.cardRight {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end;
}

.redSuit {
  color: #C23B22;
}

.blackSuit {
  color: #3b3c36;
}

JQuery

$(function() {
  var values = '2;3;4;5;6;7;8;9;10;J;Q;K;A'.split(';');
  var suits = '♦;♥;♣;♠'.split(';');
  
  $('#btnDraw').on('click', function() {
    var value = Math.floor(Math.random() * values.length);
    var suit = Math.floor(Math.random() * suits.length);
    
    $('.card h2').removeClass().addClass((suit < 2) ? 'redSuit' : 'blackSuit').children().remove();
    
    $('.cardLeft h2, .cardRight h2').text(values[value] + suits[suit]);
    $('.cardCenter h2').text(suits[suit]);
  });
});

Fiddle: http://codepen.io/anon/pen/VavyBw