JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box" id="one"></div>
<div class="box" id="two"></div>
<div class="box" id="three"></div>

CSS

.box {
    width: 100px;
    height: 100px;
    margin: 5px;
    padding: 0;
    background: black;
}

JavaScript

(function () {
    "use strict";

    var one = document.getElementById('one'),
        two = document.getElementById('two'),
        three = document.getElementById('three');

    one.addEventListener("click", modifyText, false);

    one.onclick = function () {

        if (one.style.background === "blue") {
            one.style.background = "black";

        } else {
            one.style.background = "blue";
        }

    };

    two.onclick = function () {

        if (two.style.background === "blue") {
            two.style.background = "black";

        } else {
            two.style.background = "blue";
        }

    };

    function modifyText() {

        if (one.style.background && two.style.background === "blue") {
            alert("Good Work...");
        }
        
        if (one.style.background !== two.style.background) {
            alert("Sorry ...");
        }
    }
})();