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. Fique atento 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 a partir desse repositório, utilizando uma branch específica e um Pull Request para colocar seus códigos.

• Habilidades

• Entregáveis

  • O que deverá ser desenvolvido
  • Desenvolvimento

• Instruções para entregar seu projeto

  • Antes de começar a desenvolver
  • Durante o desenvolvimento

• Como desenvolver

  • Linter

• Requisitos do projeto

  Requisitos obrigatórios:

  • 1 - Adicione no seu site um título com o nome do seu jogo
  • 2 - Adicione um texto com o código RGB a ser adivinhado
  • 3 - Adicione a página opções de cores para serem adivinhadas
  • 4 - Adicione cores nas bolas elas devem ser geradas dinâmicamente
  • 5 - Clicar em um circulo colorido, deve ser mostrado um texto indicando se está correto
  • 6 - Crie um botão para iniciar/reiniciar o jogo

  Requisitos bônus:

  • 7 - Crie um placar que incremente 3 pontos para cada acerto no jogo

• Depois de terminar o desenvolvimento

• Revisando um pull request

• Avisos Finais

• Manipular o DOM.

• Manipular o Javascript.

• Manipular o CSS.

Para entregar o seu projeto você deverá criar um Pull Request neste repositório.

Este Pull Request deverá conter os arquivos index.html, style.css e script.js que conterão seu código HTML, CSS e JavaScript, respectivamente.

• Será desenvolvida uma aplicação utilizando JavaScript, HTML5 e CSS3.

• Nesta aplicação deverá ser possível jogar um jogo de adivinhação de cores e sua pontuação deverá atualizar de acordo com os acertos.

• Desenvolva uma aplicação de um jogo de adivinhação de cores.

1. Clone o repositório

• [email protected]:tryber/sd-010-b-project-color-guess.git.
• Entre na pasta do repositório que você acabou de clonar:
  • cd sd-010-a-project-color-guess

2. Instale as dependências e inicialize o projeto

• Instale as dependências:
  • npm install

3. Crie uma branch a partir da branch master

• Verifique que você está na branch master
  • Exemplo: git branch
• Se não estiver, mude para a branch master
  • Exemplo: git checkout master
• Agora, crie uma branch onde você vai guardar os commits do seu projeto
  • Você deve criar uma branch no seguinte formato: nome-de-usuario-nome-do-projeto
  • Exemplo: git checkout -b joaozinho-project-color-guess

4. Crie na raiz do projeto os arquivos que você precisará desenvolver:

• Verifique que você está na raiz do projeto
  • Exemplo: pwd -> o retorno vai ser algo tipo /Users/joaozinho/code/sd-010-b-project-color-guess
• Crie os arquivos index.html, style.css e script.js
  • Exemplo: touch index.html style.css script.js

5. Adicione as mudanças ao stage do Git e faça um commit

• Verifique que as mudanças ainda não estão no stage
  • Exemplo: git status (devem aparecer listados os novos arquivos em vermelho)
• 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)
• Faça o commit inicial
  • 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 )

6. Adicione a sua branch com o novo commit ao repositório remoto

• Usando o exemplo anterior: git push -u origin joaozinho-project-color-guess

7. 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
• Clique no botão verde "Create pull request"
• Adicione uma descrição para o Pull Request, um título claro que o identifique, e clique no botão verde "Create pull request"
• 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 commits das alterações que você fizer no código regularmente

• Lembre-se de sempre após um (ou alguns) commits atualizar o repositório remoto

• Os comandos que você utilizará com mais frequência são:

  1. git status (para verificar o que está em vermelho - fora do stage - e o que está em verde - no stage)
  2. git add (para adicionar arquivos ao stage do Git)
  3. git commit (para criar um commit com os arquivos que estão no stage do Git)
  4. git push (para enviar o commit para o repositório remoto após o passo anterior)
  5. git push -u nome-da-branch (para enviar o commit para o repositório remoto na primeira vez que fizer o push de uma nova branch)

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:styles

Quando é executando o comando npm run lint:styles, ele irá avaliar se os seguintes arquivos com a extensão CSS está com o padrão correto.

Quando é executando o comando npm run lint, ele irá avaliar se os seguintes arquivos com a extensão JS e JSX está com o padrão correto.

⚠ NESTE PROJETO O STYLELINT e ESLINT NÃO SERÁ AVALIADO. VOCÊ PODE RODAR O TESTE LOCALMENTE E FAZER AS CORREÇÕES SE DESEJAR! ⚠

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 do Chrome para facilitar a configuração da resolução. ⚠️

• Atente-se para o tamanho das imagens que você utilizará neste projeto. 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 redimensiona-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 as pessoas instrutoras.

• 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 adivinhador de cor RGB. Ou seja, dada uma string RGB, você irá fornecer 6 alternativas visuais de cores, sendo uma delas a correta! Você poderá estilizar seu projeto da forma que desejar desde que todos os requisitos sejam cumpridos. Use sua imaginação! 🧠

O que será verificado:

• Será verificado se o id do título é title.

O que será verificado:

• Será verificado se o seu id deve ser rgb-color;

• Será verificado se o texto deve conter os três números das cores RGB a ser adivinhada, no seguinte formato: (168, 34, 1).

O que será verificado:

• Será verificado que deve conter 6 circulos como opção de cor de adivinhação;

• Será verificado que a class de todos os circulos deve ser ball.

O que será verificado:

• Será verificado que ao carregar a página, as cores de cada um dos 6 circulos coloridos deve ser geradas via JavaScript.

O que será verificado:

• Será verificado que o seu id do elemento deve ser answer;

• Será verificado que quando o jogo é iniciado, o texto exibido deve ser "Escolha uma cor";

• Será verificado se o circulo colorido for o correto, deve ser exibido o texto "Acertou!";

• Será verificado se o circulo colorido for o incorreta, deve ser exibido o texto "Errou! Tente novamente!".

O que será verificado:

• Será verificado que o botão deve ter o id reset-game;

• Será verificado que ao clicar no botão, novas cores devem ser geradas via JavaScript e o elemento rgb-color deve ser atualizado;

• Será verificado que ao clicar no botão, o elemento answer deve voltar ao estado inicial, exibindo o texto "Escolha uma cor".

O que será verificado:

• Será verificado que o elemento deve ter o id score;

• Será verificado que o valor inicial dele deve ser 0;

• Será verificado que a cada acerto, é incrementado 3 pontos ao placar;

• Será verificado que ao clicar no botão reiniciar, o placar NÃO deve ser resetado.

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 time tryber/students-sd-010-b

Se ainda houver alguma dúvida sobre como entregar seu projeto, aqui tem um video explicativo.

⚠ Lembre-se que 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 dos seus colegas. Fiquem atentos à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?