JSFiddle - React, Tailwind, and code Playground

by JWo1F

HTML

<div id="div1"></div>
<div id="div2"></div>

CSS

* {
  margin: 0;
  padding: 0;
}

#div1 {
  font-size: 80px;
  color: red;
  margin-bottom:50px;
}

#div2 {
  height: 50px;
  font-size: 50px;
}

#div3 {
  width: 50px;
  height: 50px;
  font-size: 50px;
}

#div4 {
  width: 50px;
  height: 50px;
  font-size: 50px;
  color: red;
}

JavaScript

var cards = ["6", "7", "8", "9", "10", "B", "Q", "K", "A"];
var suits = ["\u2665", "\u2666", "\u2663", "\u2660"];

var combs = [];
var results = [];

// генерируем всевозможные комбинации
for(var i = 0; i < cards.length; i++) {
	for(var ii = 0; ii < suits.length; ii++) {
  	combs.push(cards[i] + suits[ii]);
  }
}

// взбиваем массив
var temp = combs.map(function(v) { return v });
combs = combs.map(function() {
  return temp.splice(Math.random() * temp.length, 1);
});

// вытаскиваем первые 9 элементов.
// Все равно массив перемешан
results = combs.splice(0, 9);

// Втыкаем в DOM
document.querySelector('#div1').innerHTML = results.join(', ');
document.querySelector('#div2').innerHTML = combs.join(', ');