JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<button onclick="shuffle('.card');">Shuffle</button> <hr>

SCSS

.card {
  height: 120px;
  width: 70px;
  margin: 15px;
  position: relative;
  display: inline-block;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  span {
    color: #000;
    background: rgba(255,255,255,.5);
    font-size: 20px;
    font-weight: bold;
    display: block;
    height: 40px;
    width: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left: -20px;
    text-align: center;
    line-height: 40px;
  }
}

JavaScript

var shuffleOptions = {
	'amount': 20,
  'background': 'random'
}

for (var i = 1; i <= shuffleOptions.amount; i++) {
	var div = document.createElement('div');
  div.className = 'card';
  div.style.background = randomColor();
  div.innerHTML = '<span>'+i+'</span>';
	document.body.appendChild(div);
}

function randomColor(){
	var variants = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f'];
	var color = '#';
  var i = 0;
  while (i < 6) {
  	i++;
    color += variants[Math.floor(Math.random() * variants.length)];
  }
  return color;
}

function shuffle(selector, method){
	var els_collection = document.querySelectorAll(selector);
  var parent = document.querySelector(selector).parentElement;
  var new_collection = [];
  [].forEach.call(els_collection, function(el){
    new_collection.push(el);
    el.remove();
  });
  while (new_collection.length) {
    var random = Math.floor(Math.random() * new_collection.length);
    parent.appendChild(new_collection[random]);
    new_collection.splice(random, 1);
  };
}