-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
84 lines (80 loc) · 3.02 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Entity Conversion Calculator</title>
<style type="text/css">
body {font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;}
label {display:block; width:12em; float:left;}
#calculator span {font-family:"Courier New", Courier, mono;}
</style>
</head>
<body>
<h1>Entity Conversion Calculator</h1>
<div id="calculator">
<label>Numeric Value (Decimal)</label><input type="text" name="decimal" /> <span></span><br />
<label>CSS Value (Hex)</label><input type="text" name="octal" disabled="disabled" />
<span></span><br />
<label>JS Value (Hex)</label><input type="text" name="octal2" disabled="disabled" /> <span></span><br />
<button>Convert</button>
</div>
<p>or</p>
<div id="converter">
<label>Paste a character here: <input type="text" id="reverse" size="2" maxlength="1" /></label>
<button>Convert</button>
</div>
<script type="text/javascript">
/*
Author: Estelle Weyl
Date: June 8, 2007
Modified: January 15, 2012
*/
var conversions = {
calc : document.getElementById("calculator"),
inputs : document.getElementsByTagName("input"),
spans : document.getElementsByTagName("span"),
theButton : document.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;
document.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();
var cssText = document.createTextNode("li:before {content:'" + hexcss + "';}");
var jsText = document.createTextNode("alert('The hex " + hexjs +" renders as HTML entity \u0026#" + decimalValue + ";');" );
conversions.spans[0].innerHTML = '&#'+ decimalValue +'; = &#' + decimalValue;
if(conversions.x){
conversions.x = conversions.spans[1].replaceChild(cssText, conversions.x);
conversions.y = conversions.spans[2].replaceChild(jsText, conversions.y);
} else {
conversions.x = conversions.spans[1].appendChild(cssText);
conversions.y = conversions.spans[2].appendChild(jsText);
}
return hexValue;
}
}
conversions.setUp();
</script>
</body>
</html>