rWOvvo

index.html

<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square small"></div>
<br>
<div class="square tightened-down"></div>
<br>
<div class="square invisible tightened-up tightened-down"></div>
<div class="square tightened-up tightened-down"></div>
<div class="square invisible tightened-up tightened-down"></div>
<br>
<div class="square invisible tightened-up"></div>
<div class="square invisible tightened-up"></div>
<div class="square tightened-up"></div>
<br>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>

rwovvo.markdown

rWOvvo

A Pen by tkrugg on CodePen.

License.

script.js

var bigSquares = $(".square:not(.small):not(.invisible)")
var clicked = [];

bigSquares.click(function() {
  $(this).toggleClass("blue");

  if ($(this).hasClass("blue")) {
    clicked.push(this);
  } else {
    var that = this;
    clicked = clicked.filter(function(elem) {
      return elem === that;
    });
  }
  if (clicked.length === bigSquares.length) { // if all big squares were clicked
    unclickAll(clicked)
  }
});

function unclickAll(clicked) {
  if (clicked.length > 0) {
    setTimeout(function() {
      var elem = clicked.pop();
      $(elem).removeClass("blue");
      unclickAll(clicked)
    }, 300);
  } else {
    // unclicked all, now removing listeners;
    bigSquares.off("click");
  }
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.scss

.square {
  border: 1px solid black;
  background: white;
  width: 50px;
  height: 50px;
  display: inline-block;
  margin: 15px 25px;
  &.tightened-up {
    margin-top: 0px;
  }
  &.tightened-down {
    margin-bottom: 0px;
  }
  &.small {
    width: 20px;
    height: 20px;
    margin-left: -25px - 20px/2;
    margin-bottom: 50px-20px;
    background: #57D497;
  }
  &.blue {
    background:#33C6E4;
  }
}
.invisible {
  border-color: transparent;
}
body {
  font-size: 0px;
}