JSFiddle - React, Tailwind, and code Playground

by alekskorovin

HTML

<div class="el1">
    <div class="el2">
        <div class="el3"></div>
    </div>
</div>

CSS

.el1 {
        position:relative;
        background-color: red;
        width: 400px;
        height: 400px;
    }
    .el2 {
        position:absolute;
        top: 50px;
        left: 50px;
        background-color: green;
        width: 300px;
        height: 300px;
    }
    .el3 {
        position:absolute;
        top: 50px;
        left: 50px;
        background-color: blue;
        width: 200px;
        height: 200px;
    }

JavaScript

var colors = [
    'red',
    'green',
    'blue',
    'yellow',
    'magenta',
    'pink'];

// Set initial background colors
document.querySelectorAll('.el1')[0].style.backgroundColor = 'red';
document.querySelectorAll('.el2')[0].style.backgroundColor = 'green';
document.querySelectorAll('.el3')[0].style.backgroundColor = 'blue';

// Array of our elements and CSS classes
var elements = document.querySelectorAll('div'),
    elementsNumber = elements.length,
    elementsClassNames = [];

for (var i = 0; i < elementsNumber; i++) {
    var currentClassName = elements[i].className;
    elementsClassNames.push(currentClassName);
}

// Function to calculate random color from an array
var getRandomColorFromArray = function (arr) {
    var min = 0,
        max = arr.length,
        randomIndex = Math.floor(Math.random() * (max - min));

    return colors[randomIndex];
};

// Check all colors if they match
var checkAllColors = function (inputColor) {
    for (var i = 0; i < elementsNumber; i++) {
        var loopElement = document.querySelectorAll('.' + elementsClassNames[i])[0];
        var elementColor = loopElement.style.backgroundColor;
        if (inputColor != elementColor) {
            return;
        }
    }
    alert('Все готово');
}

var changeAndCheckColor = function (event) {
    var eventTarget = event.target ? event.target : event.srcElement,
        cssClass = eventTarget.className,
        currentElement = document.querySelectorAll('.' + cssClass)[0],
        newColor = getRandomColorFromArray(colors);

    currentElement.style.backgroundColor = newColor;
    checkAllColors(newColor);
};

document.addEventListener('click', function (e) {
    changeAndCheckColor(event);
}, false);