Tutorial

Simple random color genorator

In this tutorial I will be showing you how to make, in my opinion the simplest random hex color genorator. To make this I will be using basic HTML and Javascript and jQuery

so if you don't know one or both I recommend going and learning them/it. Don't worry I will be explaining what I'm doing every step.

feel free to look

the HTML

First, get out your html document

make sure you have the link to your javascript file or to javascript and jquery script

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js'></script> <script src="yourjsfile.js"><script>

next add an h1 inside a div like this:

<div>

            <h1>Click Me</h1>

            </div>

the div will be the area the color is displayed snd the h1 will be the color name

the Styling

just to make our page look better we can add some styling

this step is optional but if you want it to look like the demo above I would check this out

First, add the sizing you want to your div so the color will show up

I'm just going to use a property some you new coders might not know

This property is called vw and vh(viewport width and viewport height

these properties essentialy mean the screens width and height

if I have my width equal to 50vw it means the size is half the screen size of whatever the website is veiwing on(same thing goes for height)

I used vw and vh on the example at the top so it covers the whole screen but when you scroll down theres other content

now for my code

<div style="width: 100vw; height: 100vh"><div>

for the styling of the h1 element I will give it a font size, font family and a position

for the position I will use top, left, right, and bottom and put them all equal to 0

this means it can't go any direction so it stays in the middle

its like when you learned coordinates in math class and you had the origin where a dot or something positioned in the very center

give it a position of absolute and a width and height or it won't work correctly!!!

again heres my code to copy or not copy

<h1 style="position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 300px; height: 200px; color: #fff; font-size: 4em; font-family: verdana;><h1>

that might seem like a mess of code but you need it for centered text(everything except the colors and font stuff)

JS part one

were now moving on to the javascript part of the tutorial

first put this in your code so the jquery we put in later works

$(document).ready(function() {

            });

second we need to make 6 variables for all 6 letters/numbers in a hex color code

call each variable rand then a number because these will genorate our random numbers

don't set your variables equal to anything yet we will do that in part two of the js

feel free to copy all of this part because most of it is tedious to write

if you didn't know tedious means to long, tiresome and or dull

enough talk, heres the code

var rand1 = ;

            var rand2 = ;

            var rand3 = ;

            var rand4 = ;

            var rand5 = ;

            var rand6 = ;

next we will make an array of all the letters and numbers hex colors have

var hexArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f']

next we will need to make an array of all the rand variables

I will explain why in JS part two

var randArray = [rand1, rand2, rand3, rand4, rand5, rand6];

The code you should have right now should look something like this

$(document).ready(function() {

            var rand1 = ;

            var rand2 = ;

            var rand3 = ;

            var rand4 = ;

            var rand5 = ;

            var rand6 = ;

var hexArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'] var randArray = [rand1, rand2, rand3, rand4, rand5, rand6]; });

JS part two

Now onto our last big step

we will be making our code repeat the JS function mathrandom times the amount of things in the hexArray, put the repeated code together and make the div a random color

that was a mouthfull

first we will be adding values to our rand variables

these values are all the same but if we did something like

rand1 = rand2 = 5(for example)

the background-color would always have 6 digits that are the same like #333333, #aaaaaa, #eeeeee ect.

the value takes gets a random number with math random in the hexArray(the numbers corespond to the objects number in the array like a a number on a list, click

this like if you want to learn more)

next it gets the value of that number and stores it in itself like how 5 is stored in X in the example below:

var X = 5;

now for the code

add this to every rand variable

hexArray[Math.floor(Math.random() * hexArray.length)];

your code should looks something like this

var rand1 = hexArray[Math.floor(Math.random() * hexArray.length)];

            var rand2 = hexArray[Math.floor(Math.random() * hexArray.length)]; //and so on

remember that array we made earlier?

that array has all the rand variables in it so if they were their values instead of names it would look something like this

var randArray = [4,5,3,a,a,6]

I chose those values at random much like the thing were building will

if your curious:

this is the color

now we have the values but how will we put them together for use

simple we will use the join() function

if I had an array for example:

var stuff = ["turtles", "kiwi", "play doe"];

and I used the join() function:

stuff.join()

the code would print out:

turtles, kiwi, play doe

one cool thing about join() is that we can put anything in between the things in the array items

so if I had this code:

stuff.join("and")

the code would print out:

turtles and kiwi and play doe

when we do this we can put nothing in between them like this:

stuff.join("")

the code would print out:

turtleskiwiplaydoe

see where i'm going with this?

if you don't i'm goin to do the same thing we did with turtles and play doe in the example to our code

go ahead and make a variable called hexValue and set it equal to join our array like this:

var hexValue = randArray.join("");

if we chose to print out the value(which we will) it would look something like this

ff5554

if you didn't know these letters and numbers were randomly picked and only mean a color(kinda)

for those of you who are curious again

this is the color

you might not be able to read it because of the random background color if you clicked it

back to business

your code should look like this this so far:

$(document).ready(function() {

            var hexArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'];

            var rand1 = hexArray[Math.floor(Math.random() * hexArray.length)];

            var rand2 = hexArray[Math.floor(Math.random() * hexArray.length)];

            var rand3 = hexArray[Math.floor(Math.random() * hexArray.length)];

            var rand4 = hexArray[Math.floor(Math.random() * hexArray.length)];

            var rand5 = hexArray[Math.floor(Math.random() * hexArray.length)];

            var rand6 = hexArray[Math.floor(Math.random() * hexArray.length)];,

            var randArray = [rand1, rand2, rand3, rand4, rand5, rand6];

            var hexValue = randArray.join("");

            });

if we were to try to put the color on the div at this point it wouldn't work because we don't have a "#" symbol

in most cases hex colors don't work without a hashtag

to fix this add "#" + to your hexValue variable like this:

var hexValue = "#" + randArray.join("");

now we have the proper code for the random color

but wait! we haven't added it to or div or displayed the value!

first go into your html and give the div an id of color so we can select it

<div id="color"></div>

then give your h1 an id of value like this

<id="value">></div>

now go into you js and add some jquery code so the body has that a random background-color:

$("#color").css("background-color", value);

to display the value we will use text() like this:

$("#value").text(value);

if your isn't working or you messed up copy and paste this:

$(document).ready(function() {

            var hexArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'];

            var rand1 = hexArray[Math.floor(Math.random() * hexArray.length)];

            var rand2 = hexArray[Math.floor(Math.random() * hexArray.length)];

            var rand3 = hexArray[Math.floor(Math.random() * hexArray.length)];

            var rand4 = hexArray[Math.floor(Math.random() * hexArray.length)];

            var rand5 = hexArray[Math.floor(Math.random() * hexArray.length)];

            var rand6 = hexArray[Math.floor(Math.random() * hexArray.length)];

            var randArray = [rand1, rand2, rand3, rand4, rand5, rand6];

            var hexValue = randArray.join("");

            $("#color").css("background-color", value);

            $("#value").text(value);

            });

and the HTML

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js'></script>

            <script src="yourjsfile.js"></script><div id="color" style="width: 100vw; height: 100vh">

            <h1 id="value" style="position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 300px; height: 200px; color: #fff; font-size: 4em; font-family: verdana;"></h1>

            <div>

add the essentials for it to work because I Assume you read the top or know basic HTML

Well thats it for this tutorial

if you still can't get the code copy it from this

this my txt file