ARCADIS IS HIRING!!! Company : Arcadia Position : Software Engineer Experience : Bs/Ms Degree : BS in CS Apply Link: Apply Here
Randomized color Using JavaScript
Did you ever feel tired of writing long random colors for different <div> or <span> just to test something simple?
So here is a simple solution. The following snippet generates a random color in hexadecimal format.
var randomColor = '#'+Math.floor(Math.random()*16777215).toString(16);
//generates a random color -> #56eec7
That's it!🥳 You can place this in a function and call the function everytime you need a random color.
function generateRandomColor() { var randomColor =
'#'+Math.floor(Math.random()*16777215).toString(16);
return randomColor;
//random color will be freshly served
}
document.body.style.backgroundColor = generateRandomColor() // -> #e1ac94
someDiv.style.color = generateRandomColor() // -> #34c7aa
1.Why the number 16777215?
- Well this needs a little bit of Math. We all know that the colors range from
#000000(pitch black) to#ffffff(pure white). - The number of colors that exist from black to white as per rgb values are
16777216. - This can be calculated simply by using permutation & combination formula
[result = m to the power of n => 16 to power of 6 => 16777216] - However our ultimate goal is to convert the number into hexadecimal format and
16777216converts to1000000and16777215converts toffffff. Hence we proceed with 167777215 as the highest number for hexadecimal conversion.
2.Randomness
- As we need some randomness in our output we are multiplying our magic number with
Math.random()which returns floating number in range from inclusive of 0 to exclusive of 1. 3.Hexadecimal conversion
- Now we are in the endgame, the last part of the code. To convert a number to hexadecimal format string , we have a beautiful method
toString()which accepts the number that tells to which format it has to convert. - As we are converting to string of hexa-decimal format and hence we pass 16 as the argument as follows.
Lets have a look Code Now!!
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script src='main.js'></script>
</head>
<body>
<main>
<div id="texto">#ffffff</div>
<button onclick="gerarCorAleatorial()" class="btn">
CLICK HERE
</button>
</main>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
main{
width: 350px;
height: 350px;
background: #00142c;
color: white;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
flex-direction: column;
font-weight: 500;
}
button{
outline: none;
margin-top: 20px;
width: 100%;
height: 50px;
background: rgb(7, 219, 134);
color: #00142c;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
}
button:hover{
filter: brightness(0.8);
}
JAVASCRIPT:
function gerarCorAleatorial(){
var randomColor ='#' + Math.floor (Math.random () * 16777215).toString (16);
document.body.style.backgroundColor = randomColor;
var text = document.getElementById('texto');
text.innerText = randomColor;
}
Comments
Post a Comment