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 oid
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:
- 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). - Arredondei o resultado para baixo com
Math.floor()
, garantindo um número inteiro. - Converti esse número para string hexadecimal com
.toString(16)
. - 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.