Building a Random Card Generator from a Deck of 52 Cards

The Ace is usually considered the highest-ranking card, although it can sometimes be used as a low card in certain games. The face cards (Jack, Queen, and King) are each worth 10 points in most card games.

In addition to the 52 cards, some decks may also include two Jokers. The Jokers are not typically used in most traditional card games, but they can be used as wild cards or in various other ways in some games.

The standard deck of cards has a long history and has been used for centuries for playing a variety of card games, including Poker, Bridge, Blackjack, and many others. With the rise of online gaming, the standard deck of cards has also been adapted for use in many digital card games and mobile apps.

Download Card Images Here : Download Card Images

Follow this video for complete guidance:

HTML

<div class="wrapper">
  <div>
    <img id="card" src="cards/10c.svg">
    <div class="random" onclick="random();">Random</div>
  </div>
</div>

CSS

body{
  background: #000;
}
.random{
  background: #3fbcf0;
  text-align: center;
  padding: 20px;
  margin-top: 20px;
  cursor: pointer;
  font-size:18px;
}
.wrapper{
  position: absolute; 
  top:50%;left:50%;
  transform: translate(-50%,-50%);
}

JavaScript

function shuffleArray(array) {
  for (var i = array.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
  return array;
}


var cards = ['a','2','3','4','5','6','7','8','9','10','j','q','k'];
var types = ['c','d','h','s']; //club, diamond, hearts, spades
cards = shuffleArray(cards);
types = shuffleArray(types);

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

function random(){
  randomize = setInterval(function(){
    cards = shuffleArray(cards);
    types = shuffleArray(types);
    card.setAttribute('src','cards/'+cards[0]+types[0]+'.svg');
  },60); 
  setTimeout(function(){
    clearInterval(randomize);
  },5000);
}

Complete Source Code :

<style type="text/css">
  body{
    background: #000;
  }
  .random{
    background: #3fbcf0;
    text-align: center;
    padding: 20px;
    margin-top: 20px;
    cursor: pointer;
    font-size:18px;
  }
  .wrapper{
    position: absolute; 
    top:50%;left:50%;
    transform: translate(-50%,-50%);
  }
</style>
<div class="wrapper">
  <div>
    <img id="card" src="cards/10c.svg">
    <div class="random" onclick="random();">Random</div>
  </div>
</div>

<script>
function shuffleArray(array) {
  for (var i = array.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
  return array;
}


var cards = ['a','2','3','4','5','6','7','8','9','10','j','q','k'];
var types = ['c','d','h','s']; //club, diamond, hearts, spades
cards = shuffleArray(cards);
types = shuffleArray(types);

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

function random(){
  randomize = setInterval(function(){
    cards = shuffleArray(cards);
    types = shuffleArray(types);
    card.setAttribute('src','cards/'+cards[0]+types[0]+'.svg');
  },60); 
  setTimeout(function(){
    clearInterval(randomize);
  },5000);
}

</script>