How To Make A Javascript Gradient Generator

Being my first post on I think it's best to introduce myself first. I'm Scott Andrews and i'm a second year computing student at the university of Worcester in the United Kingdom. I started programming with HTML and CSS at the age of 12 and never looked back. I have a couple of website clients and am about to publish my first IOS app.

I went about starting to build the website by first choosing jQuery to be my javascript framework of choice. I went for jQuery as it enabled me to quickly and easily hide sections of html code and respond to hover events. jQuery also adds simple animations which is powerful.

After a bit of google searching I came across stack overflow (which is where I spend 90% of my time on the internet.) the required javascript method to be able to create a random hex decimal value.

`randomColourOne = "#000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);});`

Once the value was created it needed to be assigned to the background of the website. For that I used the -webkit-linear-gradient css style which does still have its compatibility issues but runs fine on codepen.

`var background = document.getElementById("background"); = "-webkit-linear-gradient("+ randomColourOne +" , "+ randomColourTwo +")";`

That was in essence the bulk of the Javascript. The whole code is available at codepen.

Thanks Guys, Scott Andrews

See the Pen Gradient Generator by Scott Andrews (@ScottAndrews) on CodePen.