O projeto mais difícil até o momento!! Me dediquei bastante, pesquisei muito e pedi ajuda para conseguir fazer esse projeto. Sinto agora, depois de concluir, que realmente é incrível JavaScript.
- No terminal, em um diretório de sua escolha, clonar o repositório:
git clone git@github.com:lucas-da-silva/pixels-art.git
- Dentro do reposítorio, basta abrir o arquivo index.html para visualizar o projeto no navegador. 🚀
Sua página deve conter o título "Paleta de Cores"
-
O título deverá ficar dentro de uma tag
h1
com oid
denominadotitle
; -
O texto do título deve ser exatamente "Paleta de Cores".
Sua página deve conter uma paleta com quatro cores
-
A paleta de cores deve ser um elemento com
id
denominadocolor-palette
, e cada cor individual contida na paleta de cores deve possuir aclasse
chamadacolor
; -
A cor de fundo de cada elemento da paleta deverá ser a cor que o elemento representa. A única cor não permitida na paleta é a cor branca;
-
Cada elemento da paleta de cores deverá ter uma borda preta, sólida e com 1 pixel de largura;
-
A paleta de cores deverá listar todas as cores disponíveis para utilização lado a lado, e deverá ser posicionada abaixo do título
Paleta de Cores
; -
A paleta de cores não deve conter cores repetidas.
A primeira cor na paleta criada no requisito 2 deve ser preta
Sua página deve conter um quadro de pixels 5x5
-
O quadro de "pixels" deve ter 5 elementos de largura e 5 elementos de comprimento;
-
O quadro de "pixels" deve possuir o
id
denominadopixel-board
, ao passo que cada "pixel" individual dentro do quadro deve possuir aclasse
denominadapixel
; -
Ao abrir a página, a cor inicial dos "pixels" que compõem o quadro de pixels deve ser branca;
-
O quadro de "pixels" deve aparecer abaixo da paleta de cores.
5 - Faça com que cada pixel do quadro tenha largura e altura de 40 pixels e borda preta de 1 pixel de espessura.
Cada pixel
do quadro deve possuir 40px de largura e 40px de altura e uma borda preta solida de 1px de espessura
Ao carregar a página, a cor preta já deve estar selecionada na paleta para pintar os pixels do quadro.
-
O elemento da cor preta deve possuir inicialmente a classe
selected
; -
O elemento que deverá receber a classe
selected
deve ser um dos elementos que possuem a classecolor
, como especificado no requisito 2.
Ao clicar em outras cores da paleta de cores, a cor deve ser selecionada e poderá ser utilizada para preencher os quadros
-
A
classe
selected
deve ser adicionada à cor selecionada na paleta, ao mesmo tempo em que é removida da cor anteriormente selecionada; -
Somente uma das cores da paleta deve ter a classe
selected
de cada vez; -
Os elementos que deverão receber a
classe
selected
devem ser os mesmos elementos que possuem a classecolor
, como especificado no requisito 2.
Ao clicar em algum pixel
do quadro a sua cor deve ser alterada para a cor selecionada na paleta de cores
Sua página deve ter um botão que, ao ser clicado, deixe todos os pixels
do quadro com a cor branca
Sua página deve conter um input para que a pessoa usuária possa definir o tamanho do quadro de pixels
-
Crie um input e um botão que permitam definir um quadro de pixels com tamanho entre 5 e 50. Ao clicar no botão, deve ser gerado um quadro de N pixels de largura e N pixels de altura, em que N é o número inserido no input. Ou seja, se o valor passado para o input for igual a 7, ao clicar no botão, será gerado um quadro de 49 pixels (7 pixels de largura x 7 pixels de altura);
-
O input deve ter o
id
denominadoboard-size
e o botão deve ter oid
denominadogenerate-board
; -
O input só deve aceitar número maiores que zero. Essa restrição deve ser feita usando os atributos do elemento
input
; -
O botão deve conter o texto "VQV";
-
O input deve estar posicionado entre a paleta de cores e o quadro de pixels;
-
O botão deve estar posicionado ao lado do input;
-
Se nenhum valor for colocado no input ao clicar no botão, mostre um
alert
com o texto: "Board inválido!"; -
O novo quadro deve ter todos os pixels preenchidos com a cor branca.
A pessoa usuária não pode definir um quadro com menos que 5 e mais que 50 pixels
- Caso o valor digitado no input
board-size
esteja fora do intervalo de 5 a 50, faça:
-
Se o valor de
board-size
for menor que 5, considere 5pixels
como padrão; -
Se o valor de
board-size
for maior que 50, considere 50pixels
como padrão.