Project Description • Learning • Requirements • Stacks • How to run the application
Descrição do Projeto • Aprendizado • Requisitos • Tecnologias Utilizadas • Rodar a Aplicação
In this project, I developed a web page with a pixel board that can be colored by selecting a color from the palette above and then clicking on the desired pixel.
It is also possible to reset the board, leaving all pixels white to color again.
- Manipulating the DOM
- Manipulating JavaScript
- ✅ Add the title Paleta de Cores to the page
- ✅ Add a palette of four distinct colors to the page
- ✅ Add black as the first color in the color palette
- ✅ Add a pixel board with 25 pixels to the page
- ✅ Make each pixel element 40x40 pixels and surrounded by a 1px black border
- ✅ Set black as the initial color. When the page loads, black should already be selected to paint the pixels
- ✅ Clicking on a color from the palette selects it and allows it to be used to fill the pixels on the board
- ✅ Clicking on a pixel within the board after selecting a color fills that pixel with the selected color
- ✅ Create a button that, when clicked, clears the board by filling all pixels with white
- ❌ Allow the user to define the size of the pixel board
- ❌ Limit the minimum and maximum size of the board
- ❌ Make the colors of the palette randomly generated when the page loads
Note: In some projects, a few requirements were left unfinished due to the fast-paced course, not because I couldn't do them. At the time, I just needed a bit more time.
I haven't decided yet whether to keep it this way to show my progress during the learning journey or if I should complete the missing requirements from the course projects.
Feedback is always welcome.
- HTML
- CSS
- JavaScript
- Clone the repository:
git clone git@github.com:prtpj1/project-pixels-art.git - Access the project folder:
cd project-pixels-art - Start the application:
open the index.html file in your browser
Note:
When I did this project, I didn't know about Conventional Commits. It was only in the BackEnd module of the Trybe course that I learned and started making better commits.
If you have any difficulty with the instructions or want to give feedback, feel free to send me a message.
Neste projeto, desenvolvi uma página web com um quadro de pixels que pode ser colorido selecionando a cor na paleta acima e então clicando no pixel desejado.
Também é possivel reiniciar o quadro deixando ele todo branco para colorir novamente.
- Manipular o DOM
- Manipular o Javascript
- ✅ Adicionar à página o título Paleta de Cores
- ✅ Adicionar à página uma paleta de quatro cores distintas
- ✅ Adicionar a cor preta como a primeira cor da paleta de cores
- ✅ Adicionar à página um quadro de pixels, com 25 pixels
- ✅ Fazer 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
- ✅ Definir a cor preta como cor inicial. Ao carregar a página a cor preta já deve estar selecionada para pintar os pixels
- ✅ Clicar em uma das cores da paleta, faz com que ela seja selecionada e utilizada para preencher os pixels no quadro
- ✅ 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
- ✅ Criar um botão que, ao ser clicado, limpa o quadro preenchendo a cor de todos seus pixels com branco
- ❌ Fazer o quadro de pixels ter seu tamanho definido pelo usuário
- ❌ Limitar o tamanho mínimo e máximo do board
- ❌ Fazer com que as cores da paleta sejam geradas aleatoriamente ao carregar a página
OBS: Em alguns projetos alguns requisitos não foram feitos devido a dinamica acelerada do curso e não por eu não saber como fazê-los. Na época eu apenas precisaria de um pouco mais de tempo.
Ainda não decidi se é melhor deixar desta forma para demonstrar o meu progresso durante meu aprendizado ou se seria melhor completar os requisitos que ficaram faltando nos projetos do curso.
Feedbacks são bem vindos.
- HTML
- CSS
- JavaScript
- Clone o repositório:
git clone git@github.com:prtpj1/project-pixels-art.git - Acesse a pasta do projeto:
cd project-pixels-art - Inicie a aplicação:
abra no seu navegador o arquivo index.html
OBS:
Na época que fiz este projeto eu ainda não conhecia os Conventional Commits. Somente a partir do módulo de BackEnd do curso da Trybe que aprendi e comecei a fazer commits melhores.
Se tiver alguma dificuldade com as instruções e quiser dar um feedback me mande uma mensagem