Random color generator

      No comments   
In this article we will make a random color generator in JavaScript. Our application will have a button to generate random color and a div to display it. Although the code base is small, it can be useful in many scenarios. You can view the finished application here. And the source code.

The requirements for this application are basic knowledge of html and JavaScript.

The application has one html file which contains a button and a div. The button and div are given the id ‘btn’ and ‘output’. 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<html>

<head>
    <title> Color Generator </title>
</head>

<body>

    <!--Div to show output color-->
    <div style="width:300px; height:300px; border-style:solid; background-color:green" id="output"></div>
    <br>
    <!--Button to generate random color when clicked-->
    <button id="btn">Generate</button>

    <!--JavaScript file-->
    <script type="text/javascript" src="script.js"></script>
</body>

</html>


Now let’s learn a bit about hex colors. Our application will generate a random hex color like : #373737, #A3456B, #7ABD23 etc. As you can see, all hex color code stars with a ‘#’ and 6 random alphabets/numbers follow. The alphabet and numbers ranges from [A-F] and [0-9].  So we will need a combination of such string and  a random number generator to select each character of that combination six times.

The combination looks something like this.
'ABCDEF0123456789'

And this is the function to generate random number ranging from min to max (for simplicity let’s ignore the mathematics).

1
2
3
function random(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

Now lets declare a function which generates a random color.


1
2
3
4
5
6
7
function generate() {
    var c = '#';
    for (var i = 0; i < 6; i++) {
        c += combination[random(0, 15)];
    }
    return c;
}

What this function does is, initially it declares a string 'c' and adds ‘#’ symbol to it. Inside the for loop which runs 6 times it adds a random character from the combination to c. The random functions returns a number from 0 to 15. Finally, after the loop it returns the string containing the random hex color.

Now we attach a click event to the  generate button and assign the backgroundcolor of output div  to the random hex color returned by generate() function. Let’s combine the pieces to form our applications’ core.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
var combination = 'ABCDEF0123456789';

function generate() {
    var c = '#';
    for (var i = 0; i < 6; i++) {
        c += combination[random(0, 15)];
    }
    return c;
}

function random(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

document.getElementById('btn').onclick = function () {
    document.getElementById('output').style.backgroundColor = generate();
}


Save the JavaScript and open the html file in a browser. You will see a green box and a generate button below it. Click the button to get random colors.

As always I will be happy to answer any of your queries. If you have any recommendations or improvements mention in the comments.

Happy Coding (^_^)

0 comments:

Post a Comment