• O título deverá ficar dentro de uma tag h1 com o ID denominado title;

• O texto do título deve ser exatamente "Paleta de Cores".

O que será testado:

• O título deve possuir a tag h1;
• O título deve possuir o ID title;
• O título deve ser Paleta de Cores.

• A paleta de cores deve ser um elemento com ID denominado color-palette, e cada cor individual contida na paleta de cores deve possuir a classe chamada color;

• 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á testado:

• A paleta de cores deve possuir o ID color-palette;

• As cores individuais da paleta devem possuir a classe color;

• 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 ⚠️;

• Os elementos da paleta de cores devem ter borda preta, sólida e com 1 pixel de largura;

• As cores da paleta devem estar lado a lado;

• A paleta de cores deve estar posicionada abaixo do título Paleta de Cores;

• A paleta de cores não pode conter cores repetidas.

O que será testado:

• A primeira cor da paleta deve possuir background-color preto;

• O quadro de "pixels" deve ter 5 elementos de largura e 5 elementos de comprimento;

• O quadro de "pixels" deve possuir o ID denominado pixel-board, e cada "pixel" individual dentro do quadro deve possuir a classe denominada pixel;

• A cor inicial dos "pixels" que compõem o quadro de pixels deve ser branca;

• O quadro de "pixels" deve aparecer abaixo da paleta de cores.

O que será testado:

• O quadro de "pixels" deve possuir o ID pixel-board;

• Cada pixel individual dentro do quadro deve possuir a classe pixel;

• A cor inicial dos "pixels" dentro do quadro deve ser branca;

• O quadro de "pixels" deve aparecer abaixo da paleta de cores.

O que será testado:

• O quadro de "pixels" deve possuir altura e comprimento de 5 elementos;

• Os elementos do quadro devem possuir 40 px de altura e 40 px de largura, incluindo o seu conteúdo e excluindo a borda preta;

• Os elementos do quadro devem possuir borda preta sólida de 1px de espessura.

• O elemento que posteriormente deverá receber a classe selected deve ser um dos elementos que possuem a classe color, como especificado no requisito 2.

• O elemento da cor preta deve possuir inicialmente a classe selected.

O que será testado:

• O elemento da cor preta possui, inicialmente, a classe selected;

• Nenhuma outra cor da paleta pode ter a classe selected ao carregar a página.

• A cor clicada deve receber a classe selected e a cor previamente selecionada deve perder esta classe;

• Somente uma das cores da paleta pode ter a classe selected de cada vez;

• Os elementos que deverão receber a classe selected devem ser os mesmos elementos que possuem a classe color, como especificado no requisito 2.

O que será testado:

• Somente uma cor da paleta de cores pode ter a classe selected de cada vez;

• Os pixels dentro do quadro não devem ter a classe selected quando são clicados.

O que será testado:

• Ao carregar a página deve ser possível pintar os pixels do quadro de preto;

• Após selecionar outra cor na paleta de cores, é possível pintar os pixels do quadro com essa cor;

• Somente o pixel que foi clicado deve ter a cor alterada, sem influenciar na cor dos demais pixels.

O que será testado:

• O botão deve possuir o ID clear-board;

• O botão deve estar posicionado entre a paleta de cores e o quadro de pixels;

• O botão deve possuir o texto Limpar;

• O botão ao ser clicado, deve deixar todos os pixels do quadro preenchidos de branco.

• Crie um input com ID board-size posicionado entre a paleta de cores e o quadro de pixels para receber um valor maior que zero para definir o tamanho do quadro de pixels.

• Crie um botão que deve conter o texto "VQV" e ID generate-board;

• O botão deve estar posicionado ao lado do input;

• O botão, ao ser clicado, deve alterar o tamanho do quadro para N pixels de largura e N pixels de altura, em que N é o número inserido no input. Ou seja, se o valor passado para o input for igual a 7, ao clicar no botão, será gerado um quadro de 49 pixels (7 pixels de largura x 7 pixels de altura);

• O input só deve aceitar número maiores que zero. Essa restrição deve ser feita usando os atributos do elemento input;

• Se nenhum valor for colocado no input ao clicar no botão, mostre um alert com o texto: "Board inválido!";

• O novo quadro deve ter todos os pixels preenchidos com a cor branca.

O que será testado:

• O input deve possuir o ID board-size;

• O input deve aceitar apenas números maiores que zero. Essa restrição deve ser feita usando os atributos do elemento input;

• O input deve estar posicionado entre a paleta de cores e o quadro de pixels;

• O botão deve possuir o ID generate-board;

• O botão deve possuir o texto VQV;

• O botão deve estar posicionado ao lado direito do input;

• O botão, ao ser clicado, deve mudar o tamanho do board usando o valor do input;

• O botão, ao ser clicado sem valor definido no input, deve emitir um alert com o texto: Board inválido!;

• O quadro gerado deve ter todos os pixels preenchidos com a cor branca.

• Caso o valor digitado no input board-size esteja fora do intervalo de 5 a 50, faça:

  1. Para um valor de board-size menor que 5, considere 5 pixels como o valor padrão;

  2. Para um valor de board-size maior que 50, considere 50 pixels como o valor padrão.

O que será testado:

• A altura do board pode ser igual a 50;

• A altura do board é 5 pixels quando um valor menor que 5 é colocado no input;

• A altura do board é 50 pixels quando um valor maior que 50 é colocado no input.

O que será testado:

• A cor preta é a primeira na sua paleta de cores;

• As cores geradas na paleta são diferentes a cada carregamento da página.