CSS3 tooltips II

by Sergio Parilli

HTML

<form name="fcalculator" onSubmit="return false;">
<div id="calculator">
<label>Valore num (Dec)</label><input type="text" name="decimal" /> <span></span><br />
<label>Valore CSS (Hex)</label><input type="text" name="octal" disabled="disabled" /> 
<span></span><br />
<label>Valore JS (Hex)</label><input type="text" name="octal2" disabled="disabled" /> <span></span><br />
<button>Converte</button>
</div>
<br />
<div id="converter">
<label>O incolla un carattere qui: <input type="text" id="reverse" size="2" maxlength="1" /></label>
<button>Converte</button>
</div>
</form>

CSS

label {display:block; width:10em; float:left;}
#calculator span {font-family:"Courier New", Courier, mono;font-size:x-small}

JavaScript

/*
Author: Estelle Weyl
Date: June 8, 2007
Modified: January 15, 2012
*/
javascript: var f = document.forms['fcalculator'];
var conversions = {

    calc : document.getElementById("calculator"),
    inputs : f.getElementsByTagName("input"),
    spans : f.getElementsByTagName("span"),
    theButton : f.getElementsByTagName('button'),
	x : '',
	y : '',
	z : '',
	setUp: function(){
		conversions.theButton[0].addEventListener('click', conversions.setAllValues, false);
		conversions.theButton[1].addEventListener('click', conversions.setTop, false);
	},
	setTop : function(){
		var letter = document.getElementById('reverse').value;
		f.getElementsByTagName("input")[0].value = letter.charCodeAt().toString(10);
		conversions.setAllValues();
	},
	setAllValues: function(){
		var decimalValue = conversions.inputs[0].value;
		    decimalValue = decimalValue.replace(/\D/g, ''); //clean the value
		var hexValue = Number(decimalValue).toString(16);
		while(hexValue.length<4){
			hexValue = "0" + hexValue;
			//alert('\u' + hexValue);
		}
		if(isNaN(decimalValue)){
		   conversions.inputs[0].value = 'Number Please';
			 return;
		}
		conversions.inputs[0].value = '\46#' + decimalValue;
		conversions.inputs[1].value = hexcss = '\\'  + hexValue.toUpperCase();
		conversions.inputs[2].value = hexjs  = '\\u' + hexValue.toUpperCase();
		
		cssText = document.createTextNode("li:before {content:'" + hexcss + "';}");
		jsText = document.createTextNode("alert('Il valore hex " + hexjs + " come entit\u00E0 HTML \u00E8 : \u0026#" + decimalValue + ";');" );
		  conversions.spans[0].innerHTML = '&#38;#'+ decimalValue +'; = &#' + decimalValue;
		if(conversions.x){
			conversions.x = conversions.spans[1].replaceChild(cssText, x);
			conversions.y = conversions.spans[2].replaceChild(jsText, y);
		} else {
			conversions.x = conversions.spans[1].appendChild(cssText);
			conversions.y = conversions.spans[2].appendChild(jsText);
		}
		return hexValue;
	}
}

    conversions.setUp();