sketch.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
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>