Ao iniciar este projeto, você concorda com as diretrizes do Código de Ética e Conduta e do Manual da Pessoa Estudante da Trybe.
Você já usa o GitHub diariamente para desenvolver os exercícios, certo? Agora, para desenvolver os projetos, você deverá seguir as instruções a seguir. Atenção a cada passo, e se tiver qualquer dúvida, nos envie por Slack! #vqv 🚀
Aqui você vai encontrar os detalhes de como estruturar o desenvolvimento do seu projeto à partir desse repositório, utilizando uma branch específica e um Pull Request para colocar seus códigos.
-
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.
Requisitos bônus:
-
Manipular o DOM
-
Manipular o Javascript
- Você irá 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,cssehtml.
- Implemente uma paleta de cores usando
javascript,cssehtml.
- Será
1dia de projeto. - Data de entrega para avaliação final do projeto:
18/03/2021 - 14:00h.
- Clone o repositório
git clone git@github.com:tryber/sd-010-a-project-pixels-art.git.- Entre na pasta do repositório que você acabou de clonar:
cd sd-010-a-project-pixels-art
- Instale as dependências e inicialize o projeto
- Instale as dependências:
npm install
- Crie uma branch a partir da branch
master
- Verifique que você está na branch
master- Exemplo:
git branch
- Exemplo:
- Se não estiver, mude para a branch
master- Exemplo:
git checkout master
- Exemplo:
- Agora, crie uma branch onde você vai guardar os
commitsdo seu projeto- Você deve criar uma branch no seguinte formato:
nome-de-usuario-nome-do-projeto - Exemplo:
git checkout -b mariazinha-project-pixels-art
- Você deve criar uma branch no seguinte formato:
- Crie na raiz do projeto os arquivos que você precisará desenvolver:
- Verifique se você está na raiz do projeto
- Exemplo:
pwd-> o retorno vai ser algo tipo /Users/mariazinha/code/sd-010-a-project-pixels-art
- Exemplo:
- Crie os arquivos
index.html,style.cssescript.js- Exemplo:
touch index.html style.css script.js
- Exemplo:
- Adicione as mudanças ao stage do Git e faça um
commit
- Verifique se as mudanças ainda não estão no stage
- Exemplo:
git status(devem aparecer listados os novos arquivos em vermelho)
- Exemplo:
- Adicione o novo arquivo ao stage do Git
- Exemplo:
git add .(adicionando todas as mudanças - que estavam em vermelho - ao stage do Git)git status(devem aparecer listados os arquivos em verde)
- Exemplo:
- Faça o
commitinicial- Exemplo:
git commit -m 'iniciando o projeto. VAMOS COM TUDO :rocket:'(fazendo o primeiro commit)git status(deve aparecer uma mensagem tipo nothing to commit )
- Exemplo:
- Adicione a sua branch com o novo
commitao repositório remoto
- Usando o exemplo anterior:
git push -u origin mariazinha-project-pixels-art
- Crie um novo
Pull Request(PR)
- Vá até a página de Pull Requests do repositório no GitHub
- Clique no botão verde "New pull request"
- Clique na caixa de seleção "Compare" e escolha a sua branch com atenção
- Adicione uma descrição para o Pull Request, um título que o identifique, e clique no botão verde "Create pull request". Crie da seguinte forma:
[JOAOZINHO] Projeto Pixels Art - Não se preocupe em preencher mais nada por enquanto!
- Volte até a página de Pull Requests do repositório e confira que o seu Pull Request está criado.
-
Faça
commitsdas alterações que você fizer no código regularmente -
Lembre-se de sempre após um (ou alguns)
commitsatualizar o repositório remoto -
Os comandos que você utilizará com mais frequência são:
git status(para verificar o que está em vermelho - fora do stage - e o que está em verde - no stage)git add(para adicionar arquivos ao stage do Git)git commit(para criar um commit com os arquivos que estão no stage do Git)git push(para enviar o commit para o repositório remoto após o passo anterior)git push -u nome-da-branch(para enviar o commit para o repositório remoto na primeira vez que fizer opushde uma nova branch)
- Este Pull Request deverá conter os arquivos
index.html,style.cssescript.js, que conterão seu código HTML, CSS e JavaScript, respectivamente.
Você pode adicionar outros arquivos se julgar necessário. Qualquer dúvida, procure o time de instrução.
-
Você pode pesquisar sobre a propriedade
displaydo CSS, especificamente sobre as opçõestable,table-rowetable-cellpara 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
styledo elemento. -
Para colocar sua página no GitHub Pages, não é necessário remover o conteúdo que já está lá, você pode apenas adicionar essa nova página. Para isso, todo o conteúdo desse projeto deve ser colocado em uma pasta
/projetos/pixels-art.
Para garantir a qualidade do código, vamos utilizar neste projeto os linters ESLint e StyleLint.
Assim o código estará alinhado com as boas práticas de desenvolvimento, sendo mais legível
e de fácil manutenção! Para rodá-los localmente no projeto, execute os comandos abaixo:
npm run lint
npm run lint:stylesQuando é executado o comando npm run lint:styles, ele irá avaliar se os arquivos com a extensão CSS estão com o padrão correto.
Quando é executado o comando npm run lint, ele irá avaliar se os arquivos com a extensão JS e JSX estão com o padrão correto.
⚠ NESTE PROJETO O STYLELINT e ESLINT NÃO SERÃO AVALIADOS. VOCÊ PODE RODAR OS TESTES LOCALMENTE E FAZER AS CORREÇÕES SE DESEJAR! ⚠
💡Veja o exemplo a seguir de como o projeto pode se parecer depois de pronto. Lembre-se que você pode e deve ir além para deixar o projeto com a sua cara e impressionar todas as pessoas!
⚠️ Leia-os atentamente e siga à risca o que for pedido. Em particular, atente-se para os nomes de ids e classes que alguns elementos de seu projeto devem possuir. Não troque ids por classes ou vice-versa ⚠️
O não cumprimento de um requisito, total ou parcialmente, impactará em sua avaliação.
-
Os requisitos do seu projeto são avaliados automaticamente, sendo utilizada a resolução de tela de
1366 x 768(1366 pixels de largura por 768 pixels de altura).-
⚠️ Logo, recomenda-se desenvolver seu projeto usando a mesma resolução, via instalação deste plugin doChromepara facilitar a configuração da resolução.⚠️
-
-
Caso for utilizar imagens nesse projeto, atente-se para o tamanho delas. Não utilize imagens com um tamanho maior que 500Kb.
-
⚠️ Utilize uma ferramenta como esta para redimensionar as imagens.⚠️ -
Caso a avaliação falhe com alguma mensagem de erro parecida com
[409:0326/130838.878602:FATAL:memory.cc(22)] Out of memory. size=4194304, provavelmente as imagens que você está utilizando estão muito grandes. Tente redimensioná-las para um tamanho menor.
-
-
Para verificar se a sua avaliação foi computada com sucesso, você pode verificar os detalhes da execução do avaliador.
-
Na página do seu Pull Request, acima do "botão de merge", procure por "Evaluator job" e clique no link "Details";
-
Na página que se abrirá, procure pela linha "Cypress evaluator step" e clique nela;
-
Analise os resultados a partir da mensagem "(Run Starting)";
-
Caso tenha dúvidas, consulte este vídeo ou procure o time de instrução.
-
-
Você tem liberdade para adicionar novos comportamentos ao seu projeto, seja na forma de aperfeiçoamentos em requisitos propostos ou novas funcionalidades, desde que tais comportamentos adicionais não conflitem com os requisitos propostos.
- Em outras palavras, você pode fazer mais do que for pedido, mas nunca menos.
-
Contudo, tenha em mente que nada além do que for pedido nos requisitos será avaliado. Esta é uma oportunidade de você exercitar sua criatividade e experimentar com os conhecimentos adquiridos.
- Neste projeto, você implementará um editor de arte com pixels.
Ou seja, dada uma paleta de cores e um quadro composto por pixels, você vai permitir que quem usa consiga pintar o que quiser no quadro! 👩🎨
-
O título deverá ficar dentro de uma tag
h1com oiddenominadotitle; -
O texto do título deve ser exatamente "Paleta de Cores".
O que será verificado:
- Verifica se contém um elemento
h1com o idtitlecom o título correto
-
A paleta de cores deve ser um elemento com
iddenominadocolor-palette, ao passo que cada cor individual da paleta de cores deve possuir aclassecolor; -
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.
O que será verificado:
-
A paleta de cores deve ser um elemento com
iddenominadocolor-palette -
Verifica se cada cor individual da paleta de cores possui a
classechamadacolor. -
Verifica se a cor de fundo de cada elemento da paleta é a cor que o elemento representa. A única cor não permitida na paleta é a cor branca.
-
Verifica se cada elemento da paleta de cores tem uma borda preta, sólida e com 1 pixel de largura;
-
Verifica se a paleta lista todas as cores disponíveis para utilização, lado a lado.
-
Verifica se a paleta de cores está posicionada abaixo do título 'Paleta de Cores'
-
Verifica se a paleta de cores não contém cores repetidas.
O que será verificado:
-
Verifica se a primeira cor da paleta é preta
-
Verifica se as demais cores podem ser escolhidas livremente.
-
O quadro de "pixels" deve ter 5 elementos de largura e 5 elementos de comprimento;
-
O quadro de "pixels" deve possuir o
iddenominadopixel-board, ao passo que cada "pixel" individual dentro do quadro deve possuir aclassedenominadapixel; -
A cor inicial dos "pixels" dentro do quadro, ao abrir a página, deve ser branca;
-
O quadro de "pixels" deve aparecer abaixo da paleta de cores.
O que será verificado:
-
Verifica se o quadro de pixels possui o
iddenominadopixel-board -
Verifica se cada pixel individual dentro do quadro possui a
classedenominadapixel. -
Verifica se a cor inicial dos pixels dentro do quadro, ao abrir a página, é branca.
-
Verifica se o quadro de pixels aparece abaixo da paleta de cores
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.
O que será verificado:
-
Verifica se o quadro de pixels tem altura e comprimento de 5 elementos
-
Verifica se 40 pixels é o tamanho total do elemento, incluindo seu conteúdo e excluindo a borda preta, que deve ser criada à parte.
6 - Defina a cor preta como cor inicial. Ao carregar a página, a cor preta já deve estar selecionada para pintar os pixels
-
O elemento da cor preta deve possuir, inicialmente, a
classeselected; -
Note que o elemento que deverá receber a classe
selecteddeve ser um dos elementos que possuem a classecolor, como especificado no requisito 2.
O que será verificado:
-
Verifica se o elemento da cor preta possui, inicialmente, a
classeselected -
Verifica se nenhuma outra cor da paleta tem a
classeselected
7 - Clicar em uma das cores da paleta faz com que ela seja selecionada e utilizada para preencher os pixels no quadro.
-
A
classeselecteddeve 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
classeselectedde cada vez; -
Note que os elementos que deverão receber a classe
selecteddevem ser os mesmos elementos que possuem a classecolor, como especificado no requisito 2.
O que será verificado:
-
Verifica se somente uma cor da paleta de cores tem a classe
selectedde cada vez -
Verifica se os pixels dentro do quadro não têm a classe
selectedquando são clicados
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.
O que será verificado:
-
Verifica se ao carregar a página deve ser possível pintar os pixels de preto
-
Verifica se após selecionar uma outra cor na paleta, é possível pintar os pixels com essa cor
-
Verifica se somente o pixel que foi clicado foi preenchido com a cor selecionada, sem influenciar na cor dos demais pixels.
9 - Crie um botão que, ao ser clicado, limpa o quadro preenchendo a cor de todos seus pixels com branco.
O que será verificado:
-
Verifica se o botão tem o
iddenominadoclear-board -
Verifica se o botão está posicionado entre a paleta de cores e o quadro de pixels
-
Verifica se o texto do botão é 'Limpar'
-
Verifica se ao clicar no botão, o quadro de pixels é totalmente preenchido de branco
-
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, onde N é o número inserido no input;
-
Ou seja, se o valor passado para o input for 7, ao clicar no botão, vai ser gerado um quadro de 49 pixels (7 pixels de largura x 7 pixels de altura);
-
O input deve ter o
iddenominadoboard-sizee o botão deve ter oiddenominadogenerate-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
alertcom o texto: "Board inválido!"; -
O novo quadro deve ter todos os pixels preenchidos com a cor branca.
O que será verificado:
-
Verifica se existe um input com o id
board-size -
Verifica se existe um botão com o id
generate-board -
Verifica se o input só aceita número maiores que zero. Essa restrição deve ser feita usando os atributos do elemento
input -
Verifica se o botão contém o texto 'VQV'
-
Verifica se o input está posicionado entre a paleta de cores e o quadro de pixels
-
Verifica se o botão está posicionado ao lado do input
-
Verifica se nenhum valor for colocado no input ao clicar no botão, um
alerté exibido com o texto: 'Board inválido!' -
Verifica se ao clicar no botão com um valor preenchido, o tamanho do board muda.
-
Verifica se o novo quadro tem todos os pixels preenchidos com a cor branca
-
Caso o valor digitado no input
board-szefuja do intervalo de 5 a 50, faça:-
Valor menor que 5, considerar 5 como padrão;
-
Valor maior que 50, considerar 50 como padrão.
-
O que será verificado:
-
Verifica se a altura máxima do board é 50
-
Verifica se a altura do board é 5 quando um valor menor é colocado no input
-
Verifica se a altura do board é 50 quando um valor maior é colocado no input
- A cor preta ainda precisa estar presente e deve ser a primeira na sua paleta de cores.
O que será verificado:
-
Verifica se as cores geradas na paleta são diferentes a cada carregamento da página
-
Verifica se a cor preta ainda está presente e é a primeira na sua paleta de cores
Para "entregar" seu projeto, siga os passos a seguir:
- Vá até a página DO SEU Pull Request, adicione a label de "code-review" e marque seus colegas
- No menu à direita, clique no link "Labels" e escolha a label code-review
- No menu à direita, clique no link "Assignees" e escolha o seu usuário
- No menu à direita, clique no link "Reviewers" e digite
students, selecione o timetryber/students-sd-010-a
Se ainda houver alguma dúvida sobre como entregar seu projeto, aqui tem um video explicativo.
⚠ Lembre-se de garantir que todas as issues comentadas pelo Lint estão resolvidas! ⚠
À medida que você e as outras pessoas que estudam na Trybe forem entregando os projetos, vocês receberão um alerta via Slack para também fazer a revisão dos Pull Requests das outras pessoas estudantes. Atenção às mensagens do "Pull Reminders" no Slack!
Use o material que você já viu sobre Code Review para te ajudar a revisar os projetos que chegaram para você.
Ao finalizar e submeter o projeto, não se esqueça de avaliar sua experiência preenchendo o formulário. Leva menos de 3 minutos!
Link: FORMULÁRIO DE AVALIAÇÃO DE PROJETO
O avaliador automático não necessariamente avalia seu projeto na ordem em que os requisitos aparecem no readme. Isso acontece para deixar o processo de avaliação mais rápido. Então, não se assuste se isso acontecer, ok?