JSFiddle - React, Tailwind, and code Playground

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

HTML

<div id="random">Are you ready?</div> <hr>

SCSS

.card {
  height: 20vh;
  width: 25vw;
  border-radius: 50%;
  margin: 5px;
  position: relative;
  float: left;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  cursor: pointer;
  span {
    color: #000;
    background: #fff;
    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;
  }
}

.disabled {
  opacity: .3;
}

JavaScript

var shuffleOptions = {
	'amount': 20,
};

var random_num;

var values = [];

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);
  values.push(i);
};

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){
	var els_collection = document.querySelectorAll(selector);
  console.log(els_collection)
  if (!els_collection.length) {
  	document.querySelector('#random').innerText = 'Game over!';
    clearInterval(game_interval);
    return false;
  }
  var parent = document.querySelector(selector).parentElement;
  var new_collection = [];
  [].forEach.call(els_collection, function(el){
    new_collection.push(el);
    el.remove();
    el.onclick = function() {
    	if (this.innerText == random_num) {
        values.splice(values.indexOf(random_num), 1);
      	this.remove();
      }
    }
  });
  while (new_collection.length) {
    var random = Math.floor(Math.random() * new_collection.length);
    parent.appendChild(new_collection[random]);
    new_collection.splice(random, 1);
  };
};
shuffle('.card');
var game_interval = setInterval(function(){
	random_num = values[Math.floor(Math.random() * values.length)];
  document.querySelector('#random').innerText = random_num;
  shuffle('.card');
}, 2000);