How I Made A Gradient Generator

Being my first post on dev.to 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");
background.style.backgroundImage = "-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

Comments

[Vasilis Stergioulis]

Please don't do that with the double tilde. It makes your code look complicated and difficult to comprehend, filled with tricks.

[Akshay Kadam (A2K)]

I think its a good opportunity to familiarize yourself with double tilde. Or let alone a single one. I remember it like this ~x = -(x+1) & ~~x = x (sort of but double tilde only results in 0 or 1).

For example, ~-1 = 0, ~0 = -1, ~2 = -3, ~~1 = 1, ~~0 = 0, ~~true = 1 & ~~false = 0.

I know its difficult to understand but it sometimes make your code simpler. I didn't use it before but now use it all the time. Its easier to write if (~x) then if (x !== -1) 😝

[Vasilis Stergioulis]

Using a bitwise operator for explicit conversions is a hack. The complicated answer you are giving is the exact reason for not doing it in the first place. Six months later someone (even the future you) will struggle to understand what you did.

Anyway, if you feel that it's better for you, continue with that but explain it with remarks in the code. The added remarks will be a lot more than writting it simpler. And you will do a big favor to the future you.

[Akshay Kadam (A2K)]

Naah, I only use it for small things. If I complicate it a lot, you're right I won't get it. As long as KeyStrokes are reduced & Code is easy to read, its all good like in the above post.

[Jithesh. KT]

Nice one 👍

[Itachi Uchiha]

Good one 👍