Proyecto Unidad 6
Te han encargado una pequeña aplicación para niños llamada "Pinturitas". Con ella los niños podrán diseñar sus propios dibujos eligiendo colores y haciendo clic sobre celdas de una tabla.
Deberás hacer lo siguiente:
- En el body habrá dos divs: "colores" y "pinturitas".
- Crear en el div "colores" una pequeña de tabla con un selector de colores (puedes hacerlo con HTML). Contendrá dos filas:
- Primera fila: contendrá una serie de celdas (mínimo 6) con un color que podrá elegir el usuario para comenzar a pintar. Ten en cuenta que cada celda deberá estar referenciada de manera única (con name o id) para saber a cuál nos referimos.
- Segunda fila: indicará con un texto el color seleccionado en la primera fila.
- Crear en el div "pinturitas" de manera automática con javascript (creando elementos del DOM) una tabla de 60 celdas de largo por 30 de ancho, cada una de ellas con un tamaño de 10x10px.
- En la parte inferior habrá un botón que permitirá reiniciar la tabla a color blanco.
- Crear el .css necesario para que los elementos tengan el formato deseado.
Funcionamiento del programa:
- El usuario, al pulsar una celda de color de la tabla superior, cambiará su clase a "seleccionado".
- El usuario pulsará sobre uno de los cuadros de la segunda tabla que cambiará de color al color seleccionado.
- Seguidamente, si el ratón se mueve sobre otras celdas (sin hacer clic) se irán pintando con el color seleccionado previamente.
- Cuando el usuario vuelve a hacer clic sobre otra celda dejará de pintar.
- Es posible repetir el proceso con otros colores sobre celdas pintadas o sin pintar.
- Si queremos borrar colores, el usuario deberá pulsar sobre el color blanco.
El aspecto podría ser similar al siguiente:
