Hearts.exe

by Brodingo

HTML

<table>
    <tr></tr>
</table>

<button>Add Card</button>

CSS

@import url('https://fonts.googleapis.com/css?family=Medula+One');

body {
    background: url(http://www.ambrosiasw.com/assets/images/graphics_products/ipadwallpaper/wallpaper/Felt-Green.jpg) darkgreen top center;
    font-family: 'Medula One', cursive;
    padding-right: 40px;
}

table {
    width: 100%;
    max-width: 750px;
    margin: 60px auto;
    text-align: center;
}


td:hover .face {
    box-shadow: 0 2px 10px rgba(0,0,0,.4), 0 0 0 6px orange, 0 2px 10px 5px rgba(0,0,0,.4);
    -webkit-transform: scale(1.2) translateY(-20px) rotate(-6deg);
}

.card {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 150px;
    user-select: none;
}

.face {
    width: 100px;
    height: 150px;
    background-color: white;
    text-align: left;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
    transition: all .1s ease;
    -webkit-transform-origin: 100% 100%;
}

.number {
    font-size: 36px;
    margin: 4px;
}

.heart,
.diamond {
    color: red;
}

.face:before {
    position: absolute;
    top: 30px;
    left: 2px;
}

.spade .face:before {
    content: '♠';
}
.club .face:before {
    content: '♣';
}
.heart .face:before {
    content: '♥';
}
.diamond .face:before {
    content: '♦';
}

JavaScript

var cards = [2,3,4,5,6,7,8,9,10,"J","Q","K","A"],
    suit = ['spade','club','heart','diamond'],
    deck = $('tr'),
    button = $('button');

button.on('click', function () {
    var card = '<td><div class="card '+suit[Math.floor(Math.random() * suit.length)]+'"><div class="face"><span class="number">'+cards[Math.floor(Math.random() * cards.length)]+'</span></div></div></td>';
    deck.append(card);
});

$('table').on('click', 'td', function(){
    $(this).remove();
});

for (var i=0;i<12;i++)
{ 
    button.click();
}