Results 1 to 1 of 1

Thread: [JQuery] Random Card Generator

  1. #1

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,698

    [JQuery] Random Card Generator

    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
    HTML Code:
    <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
    Code:
    .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
    Code:
    $(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
    Last edited by dday9; Mar 7th, 2016 at 01:26 PM.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width