Esse projeto tem como objetivo a interação com um quadro de pixels, 4 cores estão presentes na página sendo que a cor preta é fixa. As demais cores são geradas automáticamente, é possível limpar os quadros e aumentar a quantidade de pixels. Além dessas funcionalidades decidi adicionar como bônus um background dinâmico, onde a cor é modificada de acordo com as cores dinâmicas da paleta de cores.
- Criar paleta de cores com 4 cores, sendo preto a primeira (pré-selecionada) e outras três cores randômicas;
- Criar um board medindo 5x5 unidades;
- Pintar cada unidade pixel com a cor selecionada ao se clicar;
- Criar um botão de limpar board;
- Criar um campo de input que permite alterar o tamanho do board (entre 5 e 50 unidades);
- HTML
- CSS
- Javacript
- DOM
- HTML Semântico
Basta acessar a página, configurar o tamanho do board ou utilizar o pré-definido e interagir com o quadro de pixels.
Dica: Ao atualizar a página novas cores serão geradas, e como bônus o background do site será adaptado as cores da nova paleta.
- Google Chrome
- VS Code (com a extensão Live Server)
No terminal:
git@github.com:ErickArgollo/project-Pixel-Art.git
Use a extensão Live Server do VS Code para iniciar o projeto no navegador.
Commits de Desenvolvimento: 11;
Tempo Gasto: 1 dia;
- Faça um fork do projeto;
- Crie uma nova branch com as suas alterações:
git checkout -b my-feature; - Salve as alterações e crie uma mensagem de commit contando o que você fez:
git commit -m "feature: My new feature"; - Envie as suas alterações:
git push origin my-feature; - Abra o seu pull-request na página do GitHub.
Esse projeto está sob a licença:
