color inverter

by aprudencio

HTML

<input id="colour" type="text" />
<br />
<input id="ocolour" type="text" />
<br />
<input id="btn" type="button" value="convert" />
<br />
<div id="t1" class="testsq">test text bla bla BLAH! bla bla BLAH! bla bla BLAH! bla bla BLAH! bla bla BLAH!</div>
<div id="console"></div>

CSS

.testsq {
    width: 300px;
    height: 100px;
    
}

JavaScript

$("#btn").click(function () {
    //alert(1);
    var co = $("#colour").val();
    var oco = returnOpposite(co);
    //alert(oco);
    $("#t1").css({"background-color":"#"+co, "color":"#"+oco});
    $("#ocolour").val(oco);
});

//alert(returnOpposite(666666));
function decimalToHex(decimal) {
  var hex= decimal.toString(16);
  if (hex.length == 1) hex = '0' + hex;
  console(hex);
  return hex;
}
function hexToDecimal(hex) {
    console("htod: "+parseInt(hex,16));
    return parseInt(hex,16);}
 
function returnOpposite(colour) {
    //colour = colour * 1;
  var r =  decimalToHex(255 - hexToDecimal(colour.substr(0,2))) 
    + decimalToHex(255 - hexToDecimal(colour.substr(2,2))) 
    + decimalToHex(255 -  hexToDecimal(colour.substr(4,2)));
   
    return r;
}

function console(text)
{
    $("#console").html($("#console").html()+"<br />"+text);
}