annabia95/project-pixels-art

Este projeto contém os requisitos realizados por Anna Beatriz Garcia Trajano de Sá enquanto estudava na Trybe 🚀

Project Pixels Art

Implementei uma página web que contém uma paleta de cores funcional que pode ser utilizada para criar desenhos em pixels. Para isto utilizei javascript, css e html.

Veja o exemplo a seguir do layout do projeto!

Demo

Instalação do projeto localmente:

Após cada um dos passos, haverá um exemplo do comando a ser digitado para fazer o que está sendo pedido, caso tenha dificuldades e o exemplo não seja suficiente, não hesite em me contatar em annagarcia@id.uff.br

1. Abra o terminal e crie um diretório no local de sua preferência com o comando mkdir:

  mkdir projetos

2. Entre no diretório que acabou de criar e depois clone o projeto:

  cd projetos
  git clone git@github.com:annabia95/project-pixels-art.git

Para evitar problemas de CORS, utilize a extensão Live Server do VSCode para conseguir carregar todos os assets externos, com o servidor rodando, abra o arquivo index.html, não é necessário rodar um npm install para ver a aplicação

Habilidades Desenvolvidas

Neste projeto, desenvolvi as seguintes habilidades:

• Manipular o DOM

• Manipular o Javascript

Escopo do Projeto

• Requisitos do projeto

  Requisitos obrigatórios:

• 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.