Skip to content

Instantly share code, notes, and snippets.

@adjavaherian

adjavaherian/cards.js

Created March 17, 2016 00:08
Download ZIP

Revisions

  1. adjavaherian created this gist Mar 17, 2016.
    122 changes: 122 additions & 0 deletions cards.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,122 @@
    // clubs (♣), diamonds (♦), hearts (♥) and spades (♠)

    var cards = [];

    var suits = ['♣', '♦', '♥', '♠'];
    var numbers = ['A', 'K', 'Q', 'J',
    '10', '9', '8', '7',
    '6', '5', '4', '3',
    '2'
    ];

    var card = document.getElementById('card');


    for(var i = 0; i < suits.length; i++) {
    numbers.forEach(function(number){
    var dupNode = card.cloneNode(true);

    Array.prototype.forEach.call(dupNode.getElementsByClassName('number'), (function(value){
    value.innerHTML = number;
    }));

    Array.prototype.forEach.call(dupNode.getElementsByClassName('suit'), (function(value){
    value.innerHTML = suits[i];
    }));

    // dupNode.getElementsByClassName('suit').innerHTML = suits[i];
    document.body.appendChild(dupNode);

    });

    }





    body {
    display: inline-block;
    }
    .card {
    float: right;
    width: 200px;
    height: 245px;
    border: solid 2px black;
    border-radius: 8px;
    margin-left: 10px;
    }

    .card .top{
    position: relative;

    min-height: 20%;

    }

    .card .top span.number{
    float: left;
    display: block;
    font-size: 30px;
    }

    .card .top span.suit {
    clear: both;
    display: block;
    font-size: 30px;
    background-color: white;
    }

    .card .middle{

    min-height: 60%;
    text-align: center;
    }

    .card .middle span {
    padding-top: 10%;
    display: block;
    font-size: 100px;
    }

    .card .bottom{

    min-height: 20%;
    margin-top: -50px;
    }

    .card .bottom span.suit{
    float: right;
    display: block;
    font-size: 30px;
    }

    .card .bottom span.number {
    clear: both;
    float: right;
    display: block;
    font-size: 30px;


    }

    .invert {
    -webkit-transform: rotate(180deg)
    }

    <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Playing_card_club_A.svg/200px-Playing_card_club_A.svg.png' />

    <div class="card" id="card">
    <div class="top">
    <span class="number">A</span>
    <span class="suit">♣</span>
    </div>
    <div class="middle">
    <span class="suit">♣</span>
    </div>
    <div class="bottom">
    <span class="suit invert">♣</span>
    <span class="number invert">A</span>
    </div>
    </div>