3 main bits of code make up this application.
The first is
the Prototype framework, included in the head section of the page.
Prototype is a JavaScript framework that aims to ease development of
dynamic web applications. Its only purpose in our case is to shorten
the code needed to address the various elements on the page and their
properties.
<script src="pt1602.js" type="text/javascript"></script>
The second
is the prototype-based javascript code that does all the calculations
and updates the properties of the various elements. The code is made up
of 3 functions, one for the DEC to HEX conversion, one for the HEX to
DEC conversion and one to update the background property of a table
cell in order to show what the colour in question looks like.
<script type="text/javascript">
function updatehex (){
k = parseInt($('red').value);
if(k>255){$('red').value=255; k=255; kp='';}
else if(k<0){$('red').value=0; k=0; kp='0';}
else if(k >= 0 && k <= 15){kp='0';}
else{kp='';}
k = k.toString(16).toUpperCase();
l = parseInt($('green').value);
if(l>255){$('green').value=255; l=255; lp='';}
else if(l<0){$('green').value=0; l=0; lp='0';}
else if(l >= 0 && l <= 15){lp='0';}
else{lp='';}
l = l.toString(16).toUpperCase();
m = parseInt($('blue').value);
if(m>255){$('blue').value=255; m=255; mp='';}
else if(m<0){$('blue').value=0; m=0; mp='0';}
else if(m >= 0 && m <= 15){mp='0';}
else{mp='';}
m = m.toString(16).toUpperCase();
$('hex').value = '#'+kp+k+lp+l+mp+m;
}
function updatergb(){
h = $('hex').value;
r=h.substring(1,3);
r=parseInt(r,16);
$('red').value=r;
g=h.substring(3,5);
g=parseInt(g,16);
$('green').value=g;
b=h.substring(5,7);
b=parseInt(b,16);
$('blue').value=b;
}
function updatecolour(){
$('colour').style.background = 'rgb('+$('red').value+',' + $('green').value+',' + $('blue').value+')';
}
</script>
The third and final part is the HTML code of the form used to change and display all the values.
<body onload="updatecolour();"> <form action="" method="post" name="colourconv"> <table align="center" border="0" cellspacing="5" cellpadding="0"> <tr> <td>Red</td> <td>Green</td> <td>Blue</td> </tr> <tr>
<td><input name="red" id="red" type="text" size="5"
maxlength="3" value="255" onchange="updatehex(); updatecolour();"
/></td> <td><input name="green" id="green"
type="text" size="5" maxlength="3" value="255" onchange="updatehex();
updatecolour();" /></td> <td><input
name="blue" id="blue" type="text" size="5" maxlength="3" value="255"
onchange="updatehex(); updatecolour();" /></td> </tr> <tr> <td>Hex</td>
<td colspan="2" align="center"><input name="hex" id="hex"
type="text" size="9" maxlength="7" value="#FFFFFF"
onchange="updatergb(); updatecolour();" /></td> </tr> <tr> <td>Colour</td> <td colspan="2" id="colour" style="border:solid 1px #000; background:#FFF;"> </td> </tr> </table> </form> </body>
|
RSS 2.0
