Add more logic to draw the grid and colorize it

css/grid.css

@@ -1,6 +1,48 @@
 #grid td {
 	background: #ddd;
+}
+
+#grid td, #grid th {
 	width: 2em;
 	height: 2em;
+}
+
+#grid tbody.ready td, #grid th {
 	cursor: pointer;
 }
+
+#grid .color0 {
+	background: #d9c7b0;
+}
+
+#grid .color1 {
+	background: #d5d5fb;
+}
+
+#grid .color2 {
+	background: #ffe6c0;
+}
+
+#grid .color3 {
+	background: #edffd3;
+}
+
+#grid .color4 {
+	background: #ffd0d0;
+}
+
+#grid .color5 {
+	background: #fcf;
+}
+
+#grid .color6 {
+	background: #adf;
+}
+
+#grid .color7 {
+	background: #fff89e;
+}
+
+#grid th.current {
+	border: 2px dashed #777;
+}

js/Grid.js

@@ -1,6 +1,8 @@
 import * as Dom from UnitJS.Dom;
 
 var size = 8;
+var currentColor = null;
+var tBody = Dom.make('tbody');
 
 return {
 	init: init
@@ -8,11 +10,45 @@ return {
 
 function init(elementId) {
 	var gridElement = document.getElementById(elementId || 'grid');
+	gridElement.appendChild(Dom.make('thead', {}, [
+		makeRow({tag: 'th', attributes: headerAttributes})
+	]));
 	for(var row = 0; row < size; row++) {
+		tBody.appendChild(makeRow({tag: 'td', attributes: bodyAttributes}));
+	}
+	gridElement.appendChild(tBody);
+}
+
+function makeRow(config) {
 	var cells = [];
 	for(var column = 0; column < size; column++) {
-			cells.push(Dom.make('td'));
+		cells.push(Dom.make(config.tag, config.attributes(column)));
-		}
-		gridElement.appendChild(Dom.make('tr', {}, cells));
 	}
+	return Dom.make('tr', {}, cells);
+}
+
+function headerAttributes(i) {
+	return {
+		class: 'color' + i,
+		onClick: function(e) {
+			if(currentColor != undefined) {
+				currentColor.classList.remove('current');
+			}
+			currentColor = e.target;
+			currentColor.classList.add('current');
+			tBody.classList.add('ready');
+		}
+	};
+}
+
+function bodyAttributes(i) {
+	return {
+		onClick: function(e) {
+			if(currentColor != null) {
+				e.target.classList.toggle(
+					currentColor.className.replace(/.*(color\d).*/, '$1')
+				);
+			}
+		}
+	};
 }