CristinaPineda/pixelsArt

Boas vindas ao repositório do projeto Arte com Pixels!

Projeto desenvolvido no módulo de fundamentos Web da Trybe

Requisitos do projeto original

1 - Adicione à página o título "Paleta de Cores".
2 - Adicione à página uma paleta de quatro cores distintas.
3 - Adicione na página a cor preta ela deve ser a primeira na paleta de cores.
4 - Adicione à página um quadro de pixels, com 25 pixels.
5 - Faça com que cada elemento do quadro de pixels possua 40 pixels de largura, 40 pixels de altura e seja delimitado por uma borda preta de 1 pixel.
6 - Definia a cor preta como cor inicial. Ao carregar a página a cor preta já deve estar selecionada para pintar os pixels
7 - Selecione uma das cores da paleta, ao clicar, a cor selecionada é a que será utilizada para preencher os pixels no quadro.
8 - Clicar em um pixel dentro do quadro após selecionar uma cor na paleta, faz com que o pixel seja preenchido com a cor selecionada.
9 - Crie um botão que, ao ser clicado, limpa o quadro preenchendo a cor de todos seus pixels com branco.

Requisitos bônus:

10 - Faça o quadro de pixels ter seu tamanho definido pelo usuário.](#10---faça-o-quadro-de-pixels-ter-seu-tamanho-definido-pelo-usuário)
11 - Limite o tamanho do mínimo e máximo do board.](#11---limite-o-tamanho-do-mínimo-e-máximo-do-board)
12 - Faça com que as cores da paleta sejam geradas aleatoriamente ao carregar a página.](#12---faça-com-que-as-cores-da-paleta-sejam-geradas-aleatoriamente-ao-carregar-a-página)

---

Habilidades

• Manipular o DOM

• Manipular o Javascript

---

O que deverá ser desenvolvido

• Implementar uma página web que contém uma paleta de cores funcional que poderá ser utilizada para criar desenhos em pixels. Para isto você irá utilizar javascript, css e html.

---

Desenvolvimento

• Implementar uma paleta de cores usando javascript, css e html.

---

Referências do projeto

• Você pode pesquisar sobre a propriedade display do CSS, especificamente sobre as opções table, table-row e table-cell para te ajudar a posicionar os elementos;

• Que tal usar um loop para adicionar o mesmo evento em vários elementos? Ou então a técnica de event bubbling combinada com classList?

• Se precisar consultar os valores do CSS de um elemento a partir do JavaScript, dê uma olhada aqui.

• Para alterar alguma propriedade do CSS de um elemento através do JavaScript, dê uma olhada no atributo style do elemento.

Link: https://cristinapineda.github.io/pixelsArt/