Math Guards

by Ryan Allison

HTML

<h1 id="h1Guard">
  Guard 1
</h1>
<a id="lnkStart">Start</a>
<a id="lnkClear">Clear</a>
<br><br>
<span id="spnUnlocked" class="u">Unlocked</span>
<span id="spnLocked" class="l">Locked</span>
<div id="divTable"></div>

CSS

td {
  width: 25px;
  height: 20px;
  border-style: solid;
  border-width: 1px;
  text-align: center;
  display: inline-block;
}

.l {
  background-color: red;
}

.u {
  background-color: lime;
}

a {
  height: 20px;
  width: 50px;
  background-color: lightgray;
  color: black;
  text-decoration: none;
  display: block;
  text-align: center;
  margin-right:10px;
  float: left;
  cursor: pointer;
}

a:hover {
  background-color: darkgray;
}

a:active {
  background-color: dimgray;
}

JavaScript

$(document).ready(function() {
  SetupTable();
});

$("#lnkStart").click( function() {
	var cells = $("td");
  for (var g = 1; g < 101; g++) {
    for (var i = 1; i < 101; i++) {
    	if (i % g == 0) {     
        delayed(150, function(x, y) {
          return function() {
          	$("#h1Guard").html("Guard " + y)
            $(cells[(x-1)]).toggleClass("u");
          };
        }(i, g));
      }
    }
  }
  
});

$("#lnkClear").click( function() {
	//throw new Error("No Error: Terminate Js execution");
  //new new;
	SetupTable();
});

function SetupTable() {
	$("#divTable").html("<table id='tblGuards'><tr>");
  for (var i = 1; i < 101; i++) {
    $("#divTable").append("<td class='l' id='guard" + i + "'>" + i + "</td>")
    if (i % 10 == 0) {
      $("#divTable").append("</tr><tr>")
    }
  }
  $("#divTable").append("</table>");
  $("#h1Guard").html("Guard 1");
  $("td").attr("class","l");
}

var delayed = (function() {
  var queue = [];

  function processQueue() {
    if (queue.length > 0) {
      setTimeout(function () {
        queue.shift().cb();
        processQueue();
      }, queue[0].delay);
    }
  }

  return function delayed(delay, cb) {
    queue.push({ delay: delay, cb: cb });

    if (queue.length === 1) {
      processQueue();
    }
  };
}());