1 files changed, 92 insertions, 0 deletions
diff --git a/sketch.html b/sketch.html
new file mode 100644
index 0000000..18baf33
--- /dev/null
+++ b/sketch.html
@@ -0,0 +1,92 @@
+<html>
+<head>
+<link href='css/normalize.css' rel='stylesheet' type='text/css'>
+<style type="text/css">
+#canvas_wrapper{
+//  position:absolute;
+  display: inline-block;
+}
+.canvas_cell{
+  border: 1px solid black;
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+}
+.canvas_row{
+//  position: absolute;
+}
+
+
+</style>
+
+</head>
+<body>
+
+<div id="canvas_wrapper">
+</div>
+<table>
+<tr>
+  <td>
+     <input size="2" type="text" id="rows" value="10">ROWS</input>
+  </td>
+</tr>
+<tr>
+  <td>
+    <input size="2" type="text" id="cols" value="10">COLS</input>
+  </td>
+</tr>
+</table>
+
+
+</body>
+<script src="js/jquery.min.js" type="text/javascript"></script>
+<script type="text/javascript">
+var c;
+function GridCanvas(){
+  this.rows = 10;
+  this.cols = 10;
+  this.container = $("#canvas_wrapper");
+  this.initialize = function(cols, rows){
+    this.rows = rows;
+    this.cols = cols;
+    for (var i = 0; i< this.rows; i++){
+      var row = document.createElement("div");
+      $(row).attr("id", "row_"+i)
+      $(row).addClass("canvas_row")
+      for (var j = 0; j< this.cols; j++){
+        var cell = document.createElement("span");
+        $(cell).addClass("canvas_cell")
+        $(cell).attr("painted", "0")
+        $(cell).addClass("column_"+j)
+        $(cell).html("&nbsp;")
+        $(cell).click(function(){
+          if ($(this).attr("painted") == "0"){
+            $(this).attr("painted", "1");
+            $(this).css("background", "black");
+          }else{
+            $(this).attr("painted", "0");
+            $(this).css("background", "white");
+          }
+        });
+        $(row).append(cell)
+      }
+      this.container.append(row)
+    }
+  }
+}
+$("#cols").change(function(){
+  var cols = $(this).val()
+  c.initialize(cols, c.rows);
+});
+$("#rows").change(function(){
+  var rows = $(this).val()
+  c.initialize(c.cols, rows);
+});
+$(document).ready(function(){
+  
+  c = new GridCanvas();
+  c.initialize($("#cols").val(), $("#rows").val());
+});
+
+</script>
+</html>