Generating random color with JavaScript code

Write JavaScript to show the usage of setInterval function using which background color of a division keeps on changing to a random color every 2 seconds. Also use setTimeout function to show the content of a textbox as label of large size after 3 seconds.

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Window Object</title>
</head>

<body>
    <div style="text-align: center; padding: 100px;" id="pp">
        <h1>Javascript <br><br> New Random Color</h1>
    </div>
    <p id="wr" style="text-align: center;">This course will introduce students to the fundamental concepts of web
        development. This course will equip students with the ability to design
        and develop a dynamic website using technologies like HTML, CSS, JavaScript,
        PHP and MySQL on platform like WAMP/XAMP/LAMP.
    </p>
    <script>
        const setBg = () => {
            const randomColor = Math.floor(Math.random() * 16777215).toString(16);
            document.getElementById("pp").style.backgroundColor = "#" + randomColor;
            color.innerHTML = "#" + randomColor;
        };
        var myVar = setInterval(setBg, 2000);
        function timedText() {
            document.getElementById("wr").style.fontSize = "x-large";
        }
        var myv = setTimeout(timedText, 3000);
    </script>
</body>

</html>

Well this is the end of the trick. If you are in hurry, you can the leave post here.

But,

if you are curious to know why only the number 16777215 and toString(16) are used, then the following part covers those explanations

So, let’s divide the code into 3 parts

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 16777216 converts to 1000000 and 16777215 converts to ffffff. 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
Math.random()*16777215
//->9653486.355498075

  • As seen the output is floating point and we need to cut down it to an integer for hex conversion and hence we use Math.floor() for that
Math.floor(Math.random()*16777215)
//->96953486

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
(96953486).toString(16)
//->934cee
Math.floor(Math.random()*16777215).toString(16);
//->12ef556
- All we need to now is just attach # before the string
var randomColor = '#'+Math.floor(Math.random()*16777215).toString(16);
//->#19feac

That’s it!
You have successfully completed the post.

Peace Out!

Read More – https://codingtimes.in/how-to-install-and-configure-sass-locally/

Leave a Reply

Your email address will not be published.