In this tutorial we’ll be using JavaScript to generate a deck of playing cards and then select a random card from that deck. We’ll then output the random card in the browser and add some CSS so it looks like an actual playing card. If you’re interested in building card games using JavaScript this is a good starting point before moving onto more elaborate games.
Let’s get started by creating a index.html
file with the following markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Random Playing Card</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<script src="script.js"></script>
</body>
</html>
Code language: HTML, XML (xml)
Then create a script.js
file and add a deckBuilder
function:
function deckBuilder() {
// ...
}
Code language: JavaScript (javascript)
Inside the deckBuilder()
function create and array with the number values and and another array with the suits used in a standard deck of playing cards:
const values = [ "A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K", ];
const suits = ["Hearts", "Diamonds", "Spades", "Clubs"];
Code language: JavaScript (javascript)
Next we’ll loop through the suits
array whilst also looping through the values
array and push the combined data into the cards
array:
const cards = [];
for (let s = 0; s < suits.length; s++) {
for (let v = 0; v < values.length; v++) {
const value = values[v];
const suit = suits[s];
cards.push({ value, suit });
}
}
return cards;
Code language: JavaScript (javascript)
We now have a function that creates an array with the suit/value combination for the 52 playing cards structured as follows:
0: {value: "A", suit: "Hearts"}
1: {value: "2", suit: "Hearts"}
2: {value: "3", suit: "Hearts"}
Code language: CSS (css)
Next we’ll create a randomCard()
function and pass it the cards
array:
function randomCard(cards) {
// ...
}
const cards = deckBuilder();
randomCard(cards);
Code language: JavaScript (javascript)
Inside the randomCard
function we’ll generate a random number between 0 and 51 (not 52 as array indexes start at 0) and get the data from the cards
array at that index. This data is then stored in variables to make it easier to work with later:
const random = Math.floor(Math.random() * 51);
const cardValue = cards[random].value;
const cardSuit = cards[random].suit;
Code language: JavaScript (javascript)
As there are HTML character entities for each of the playing card suits (♥/♦/♠/♣)
we can output these onto our playing card without having to use images. Because the entity code for diamonds is truncated we need to also truncate the "Diamonds"
string, the other suits entity codes match the strings (♥ ♠ ♣) so all we need todo is convert them to lowercase:
let entity;
cardSuit === "Diamonds" ? (entity = "♦") : (entity = "&" + cardSuit.toLowerCase() + ";");
Code language: JavaScript (javascript)
Finally we can render the random card into the HTML page:
const card = document.createElement("div");
card.classList.add("card", cardSuit.toLowerCase());
card.innerHTML =
'<span class="card-value-suit top">' + cardValue + entity + '</span>' +
'<span class="card-suit">' + entity + '</span>' +
'<span class="card-value-suit bot">' + cardValue + entity + '</span>';
document.body.appendChild(card);
Code language: JavaScript (javascript)
With the JavaScript functionality complete we can add style the HTML so it looks like a playing card. Create a file called style.css
and add the following to create the basic playing card shape:
.card {
position: relative;
width: 105px;
height: 150px;
border-radius: 5px;
border: 1px solid #ccc;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
}
Code language: CSS (css)
Because .card
is positioned relatively we can use absolute positioning for the top and bottom text. We’ll also rotate the text at the bottom 180 degrees just like a real playing card.
.card-value-suit {
display: inline-block;
position: absolute;
}
.card-value-suit.top {
top: 5px;
left: 5px;
}
.card-value-suit.bot {
transform: rotate(180deg);
bottom: 5px;
right: 5px;
}
.card-suit {
font-size: 50px;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 25%;
}
Code language: CSS (css)
And finally we’ll add the colors for each of the suits:
.card.spades,
.card.clubs {
color: black;
}
.card.hearts,
.card.diamonds {
color: red;
}
Code language: CSS (css)
Open the index.html
file in a browser and you should see a random playing card that looks like the following:

You just learnt how to build a webpage that loads a random playing card. A fully working demo of this project is available on CodePen. Thanks for reading! Why not check out more of my tutorials in the links below.