JSFiddle - React, Tailwind, and code Playground

by frogggeee McFrogggeee

HTML

<!DOCTYPE html>
<html>
<head>
<body>
<h1>card dealer</h1>
<p>by frogggeee</p>
<button type = "button" onclick = "deal()" style="font: bold 74px Arial;" >deal cards</button>
<p id = "card1"></p>
<p id = "card2"></p>
<p id = "card3"></p>
<p id = "card4"></p>
<p id = "card5"></p>
<script>
let playerCards = [];
let usedCards = []; 
let deck = [];
function createDeck() {
	let i = 0;
  let g = 0;
  let logo = 0;
  let cardNum = ["Ace", "2", "3", "4", "5", "6", "7", "8", "9", "10", "Jack", "Queen", "King"];
  let cardLogo = ["hearts", "spades", "clubs", "diamonds"];
  for (g = 0; g < 4; g++) {
    for (i = 0; i < 13; i++) {
      deck.push(cardNum[i] + " of " + cardLogo[logo]);
    }
    logo = logo + 1;
  }
  deck.push("joker");
  deck.push("joker");
}
function deal() {
	playerCards = [];
	let x = 0;
  for (x = 0; x < 6; x++) {
    chooseCard();
  }
}
function chooseCard() {
	let card = deck[Math.floor(Math.random() * deck.length)];
  while (playerCards.includes(card) == true) {
  	card = deck[Math.floor(Math.random() * deck.length)];
  }
  playerCards.push(card);
  usedCards.push(card);
}
function displayCards() {
	document.getElementById("card1").innerHTML = "1. " + playerCards[1];
  document.getElementById("card2").innerHTML = "2. " + playerCards[2];
  document.getElementById("card3").innerHTML = "3. " + playerCards[3];
  document.getElementById("card4").innerHTML = "4. " + playerCards[4];
  document.getElementById("card5").innerHTML = "5. " + playerCards[5];
}
createDeck(); 
deal();
setInterval(displayCards, 10);
</script>
</body>
</head>
</html>