Post

Criar um gerador de cor aleatorio

Dia 2 do projeto 30 dias com js

Oi gente, hoje no segundo dia do desafio, a tarefa foi criar um botão que troca a cor do fundo da página de forma aleatória. Para começar, criei um HTML simples contendo:

  • Um botão.
  • Um elemento <h3> com o id colorName, onde será exibido o código da cor gerada. Em seguida, escrevi o código JavaScript, que ficou assim:
1
2
3
4
5
6
7
8
function CorAleatoria(){
    let body = document.querySelector('body').style;
    let colorName = document.getElementById('colorName');
    let color = '#' + Math.floor(Math.random()*16777215).toString(16);

    body.backgroundColor = color;
    colorName.innerHTML = color;
}

Para gerar uma cor aleatória em JavaScript, utilizei a seguinte lógica:

  1. Multipliquei um número aleatório entre 0 e 1 (Math.random()) pelo maior valor possível em um código hexadecimal de seis dígitos (16777215 em decimal).
  2. Arredondei o resultado para baixo com Math.floor(), garantindo um número inteiro.
  3. Converti esse número para string hexadecimal com .toString(16).
  4. Adicionei o caractere # no início, formando um código de cor válido.

Assim, sempre que o botão for clicado, o fundo da página muda para uma cor aleatória e o código dessa cor é exibido na tela!


Mais um desafio simples de lógica! O maior desafio aqui foi descobrir qual é o maior valor de cor hexadecimal (#FFFFFF) em decimal. Mas, para isso, basta uma rápida pesquisa, não é mesmo? 😆


O resultado final você pode conferir aqui
link para o repositorio do projeto

Esta postagem está licenciada sob CC BY 4.0 pelo autor.