Tablero de dibujo Javascript

[gmp96]

Por cierto, este seria el enunciado del ejercicio:

Queremos hacer una aplicación en JavaScript que simule un pequeño tablero de dibujo.
El proyecto consistirá en dibujar una tablero de 30 celdas x 30 celdas con cada celda de
ancho 10 px y alto 10 px. Para realizar el tablero de dibujo se tendrá que emplear
obligatoriamente los métodos de creación de nodos del DOM. Una vez generado el
tablero se introducirá dentro de una capa DIV con id "zonadibujo".
La paleta tendrá cinco colores de dibujo. Se te facilitará un fichero .html y un fichero
.css con los estilos que tendrás a utilizar.
La programación de la aplicación JavaScript se realizará en un fichero .js adicional. Se
valorará que la aplicación sea cross-browser y funcione en Firefox, Google Chrome e
Internet Explorer
La forma de funcionamiento de la aplicación será la siguiente:
-Haremos click en alguno de los cinco colores de la paleta y se le asignará la clase
"seleccionado".
-Una vez seleccionado un color de la paleta, haremos un click en una celda (que
se pintará del color activo en la paleta) y desde ese momento al mover el ratón
por el tablero pintará del color activo todas las celdas por las que vayamos
pasando el ratón. En el momento que volvamos a hacer click en otra celda dejará
de pintar.
-Podremos escoger un color diferente y repetir el proceso, incluso sobre celdas
que ya han sido pintadas.
-Para borrar una celda pintaremos con el color blanco de la paleta.
-Cada vez que el pincel esté activado se mostrará un mensaje debajo de la paleta
de colores indicando: PINCEL ACTIVADO o PINCEL DESACTIVADO. Captura de
cómo debería quedar la aplicación: