Today you will know to create a Random Color Generator In JavaScript? In other words, Generate Random Colours using JavaScript.
Maybe you have seen automatically changing color effect on some webpages elements. That program is called automatic color generator. I searched on google there are very fewer programs about this topic. Most of that program are not actually working properly.
That’s why today I am sharing this program called Random Color Generator In JavaScript. This is a very useful program to understand javascript’s power. Basically, this program is using jQuery ( info ) to run, this is a popular javascript library. Every time when you click there will change color and show color’s code. This is a full dynamic program, I don’t put different colors code. I put just one colors code.
This program is easy to understand If you have some knowledge of JavaScript. You can also use this program’s feature into another one, Just you have to use your brain. With useful, this program is stylish also. Let’s see how this program looks like.
Preview Of Generate Random Colours Program
First, take a look at this program how it looks visually.
Now you can see clearly this program in this video. Now if you like this go for source code given below.
You May Also Like:
- Detect Keycode In JavaScript
- JavaScript Calculator Program
- Auto Type In JavaScript
- Quiz Program In JavaScript
Random Color Generator In JavaScript Source Code
Before sharing source code lets talk something about the program. I create just 2 divs, one for show color code one for show color. When we click on div background color also become changed. I use jQuery to create this, this is possible to create in pure javascript but then the program will very long hard.
First, I had put a pink color by default, Then with click body will change color. I used Math.random command to create this. After that, I put a if statement. When it creates a random code less than 7 character body will change his own color according to the random number.
You have to create 3 files for this program. One for HTML, One for CSS, & one for JS ( JavaScript ). Follow these steps to create this program easily and without error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given here below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <!-- code by webdevtrick ( https://webdevtrick.com ) --> <html lang="en" > <head> <meta charset="UTF-8"> <title>JavaScript Random Color Generator</title> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto'> <link rel="stylesheet" href="style.css"> </head> <body> <body> <div class="colorc"> <div class="colorc1"></div> #e91e63 </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="index.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
/** code by webdevtrick ( https://webdevtrick.com ) **/ body{ margin:0; padding:0; background: #e91e63; } .colorc{ padding:10px; cursor:pointer; position: absolute; font-family: Roboto; text-align:center; background: #fff; color: #e91e63; width:400px; border-radius:30px; letter-spacing: 2px; line-height: 30px; height:30px; top:50%; left:50%; margin-top:-15px; margin-left:-200px; font-size:12px; box-shadow:0 0 20px rgba(0,0,0,0.3); } .colorc1{ position: absolute; float:left; width:20px; height:20px; background: #e91e63; border-radius: 50%; margin:5px; margin-left: 20px; } .rgb{ float:right; padding-right:20px; } |
function.js
The final thing, create a JS file named ‘function.js‘ and put the codes below here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
/** code by webdevtrick ( https://webdevtrick.com ) **/ var r,g,b,cstring; function colapply(){ color(); r=newcolor.slice(1,3); g=newcolor.slice(3,5); b=newcolor.slice(5,7); r=parseInt(r,16); g=parseInt(g,16); b=parseInt(b,16); cstring="rgb("+r+","+g+","+b+")"; $(".colorc").html("<"+"div class="+"'"+"colorc1"+"'"+">"+"<"+"/"+"div"+">"+newcolor+"<span class='rgb'>"+cstring+"</span>"); $("body").css({ "background":newcolor }); $(".colorc").css({ "color":newcolor }); $(".colorc1").css({ "background":cstring }); } var newcolor; function color(){ newcolor="#"+(Math.random()*0xFFFFFF<<0).toString(16); if(newcolor.length<7){ color(); } } $(".colorc").click(colapply); colapply(); |
That’s It. Now you have successfully random color generator in javascript. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
I want to generate the color red 10% of the time how would I do that with this code?