How I Made A Javascript Gradient Generator

Feb 7, 2018

Being my first post on Medium 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");<br> = "-webkit-linear-gradient("+ randomColourOne +" , "+ randomColourTwo +")";<br>

Thanks Guys, Scott Andrews