Squares

Interview Question

by Zach Mayer

HTML

<div class="center container">
  <h1>Squares</h1>
  <div class="grid" id="classicGrid">
      <div class="square bg-white"></div>
      <div class="square bg-white"></div>
      <div class="square bg-white"></div>
      <div class="square bg-white"></div>
      <div class="square bg-black"></div>
      <div class="square bg-white"></div>
      <div class="square bg-white"></div>
      <div class="square bg-white"></div>
      <div class="square bg-white"></div>
      <div class="square bg-white"></div>
      <div class="square bg-white"></div>
      <div class="square bg-white"></div>
      <div class="square bg-white"></div>
      <div class="square bg-white"></div>
      <div class="square bg-white"></div>
      <div class="square bg-white"></div>
  </div>
  <br />
  <div class="controls">
      <input type="button" onclick="gridSelector(this)" value="up" /><br />
      <input type="button" onclick="gridSelector(this)" value="left" />
      <div class="spacer"></div>
      <input type="button" onclick="gridSelector(this)" value="right" /><br />
      <input type="button" onclick="gridSelector(this)" value="down" /><br /><br />
      <input type="button" onclick="toggleIndex()" value="toggle index" />
  </div>
</div>

CSS

.grid { width: 100%; border-top: solid 1px black; border-left: solid 1px black }
.grid:after { display: table; content: " "; clear: both; }
.square { width: 100px; height: 100px; position: relative; border-right: solid 1px black; border-bottom: solid 1px black; float: left; }
.bg-white { background-color: #fff; }
.bg-black { background-color: #000; color: #fff; }
.controls { text-align: center; width: 100%; }
.spacer { width: 75px; display:inline-block; }
.index { display:inline-block; }
.center { text-align:center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.container { display: none; } /* initial state */

JavaScript

(function ($) {
		init = function() {
      var rowSize = Math.sqrt($('.square', '#classicGrid').length);
      $(".container").width((rowSize * 100) + rowSize);
      $(".container").fadeIn();
    }

    gridSelector = function (e) {
        var direction = e.value.toLowerCase();
        moveSquare(direction);
    };

    var moveSquare = function (direction) {
        var squares = $('.square', '#classicGrid');
        var rowSize = Math.sqrt(squares.length);
        var currentIndex = $(squares).index($('.bg-black')[0]);
        var newIndex = -1;
        switch (direction) {
            case "up":
                if (currentIndex - rowSize >= 0) {
                    newIndex = currentIndex - rowSize;
                }
                break;
            case "down":
                if (currentIndex + rowSize < squares.length) {
                    newIndex = currentIndex + rowSize;
                }
                break;
            case "left":
                if (currentIndex % rowSize != 0) {
                    newIndex = currentIndex - 1;
                }
                break;
            case "right":
                if (currentIndex % rowSize != rowSize-1) {
                    newIndex = currentIndex + 1;
                }
                break;            
        }
        if(newIndex >= 0){
            $('.bg-black', '#classicGrid').toggleClass('bg-black').toggleClass('bg-white');
            $(squares[newIndex]).toggleClass('bg-black').toggleClass('bg-white');
        }
    }
    
    /* For Illustrative Purposes */
    toggleIndex = function(e){
    	var squares = $('.square', '#classicGrid');
      squares.each(function(i, el){
      	if($(el).children().length > 0 || $(el).text().length > 0){
        	$(el).empty();
        } else {
      		$(el).append($("<div class='index center'>" + i + "</div>"));
        }
      });
    };
    
    init();
})(jQuery);