Skip to content

Instantly share code, notes, and snippets.

@adjavaherian
Created March 17, 2016 00:08
Show Gist options
  • Save adjavaherian/7ed566014c5cb625d03d to your computer and use it in GitHub Desktop.
Save adjavaherian/7ed566014c5cb625d03d to your computer and use it in GitHub Desktop.
playing card generator
// 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment