Fun Script - A Javascript Gradient Maker

Just for a bit of fun the other night I made a little Javascript Gradient maker. You can view an example of it here. There’s really no actual use for it, but whatever, it’s a nice proof of concept.

Here’s how it works:

• You enter the start and end colors in hex, how many steps (lines) you want it to be (in pixels), and the id of the div.
• It splits the colors up (red, green, blue) then figures out the difference between the start and end.
• It loops through the colors, changes them as needed, and creates a sub-div and makes its background-color the new color

So basically it works by creating a bunch of new DIVs. It is still quite buggy and not 100% accurate - but it’s a fun little script

Here’s the HTML I use:

<div id='gradient1' style='width: 300px;'></div>
<div id='gradient2' style='width: 100%;'></div>
	
<script language="javascript" type="text/javascript">
	perform_gradient("ff0000","0000ff",100,"gradient1");
	perform_gradient("ff00ff","00ff00",100,"gradient2");
</script>

And here’s the javascript I use (in an external file):

function perform_gradient(startColor,endColor,height,container_id) {
	var startr = parseInt((startColor[0] + startColor[1]),16);
	var startg = parseInt((startColor[2] + startColor[3]),16);
	var startb = parseInt((startColor[4] + startColor[5]),16);
			
	var endr = parseInt((endColor[0] + endColor[1]),16);
	var endg = parseInt((endColor[2] + endColor[3]),16);
	var endb = parseInt((endColor[4] + endColor[5]),16);
			
	var diffr = endr - startr;
	var diffg = endg - startg;
	var diffb = endb - startb;
			
	var intervalr = 0;
	var intervalg = 0;
	var intervalb = 0;
			
	var curr = startr;
	var curg = startg;
	var curb = startb;
			
	var i = 0;
	var gradientTable = document.getElementById(container_id);
			
	intervalr = Math.round(diffr / height);
	intervalg = Math.round(diffg / height);
	intervalb = Math.round(diffb / height);
			
	toPrint = "";
			
	while(i < height) {
		curr_str = curr.toString(16);
				
		if(curr < 16) {
			curr_str = "0" + curr_str;
		}
				
		curg_str = curg.toString(16);
				
		if(curg < 16) {
			curg_str = "0" + curg_str;
		}
				
		curb_str = curb.toString(16);
				
		if(curb < 16) {
			curb_str = "0" + curb_str;
		}
				
		cur_color = "#" + curr_str + curg_str + curb_str;
			
		//gradientTable.innerHTML += "R:" + curr_str + " G:" + curg_str + " B:" + curb_str + "<br>";
				
		toPrint += "<div style='height: 1px;width: 100%;background-color: " + cur_color + "; padding: 0px; margin: 0px;'><\/div>\n";
												
		curr += intervalr;
		curg += intervalg;
		curb += intervalb;
		i++;
	}
									
	gradientTable.innerHTML += toPrint;
}

Update: Heh, apparently this little charm doesn’t work in IE. Funny, it works in every other browser I test

Please subscribe, or else I will cry. Do you really want to make a programmer cry?