Green to red fade

by Adam Granger

HTML

<div id="foo">
</div>

CSS

span.box {
    border: 1px solid black
}
#foo {
    width: 30em;
}

JavaScript

function getColor(percentage) {
     var r = 255 - percentage;
     var g = 0;
     var b = 0;
     var rgb = (r << 16) + (g << 8) + b;
    console.log(rgb);     
     return "#" + new String("000000" + rgb.toString(16)).slice(-6);
}    
    
for (var i = 0; i < 100; i++) {
    var box = $("<span>" + i + "</span>");
    box.attr("class", 'box');
    var color = getColor(i);
    console.log(color);
    box.css("background-color", color);
    $("#foo").append(box);
    $("#foo").append(" ");
}