You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
168 lines
4.1 KiB
HTML
168 lines
4.1 KiB
HTML
2 years ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Encoding Converter</title>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
|
||
|
|
<!-- CSS -->
|
||
2 years ago
|
<link rel="stylesheet" href="./enconv.css">
|
||
|
2 years ago
|
|
||
|
|
<!-- fonts -->
|
||
|
|
<link rel="stylesheet" href="/fonts/worksans/stylesheet.css">
|
||
|
2 years ago
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
2 years ago
|
<!-- Nav bar -->
|
||
|
|
<nav>
|
||
|
|
<ul style="list-style-type:none;">
|
||
|
|
<li><a href="references.html">references</a></li>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<!-- adding glitch effect to text
|
||
|
2 years ago
|
<div class="glitch-wrapper">
|
||
|
|
<div class="glitch" data-glitch="En-coding Converter">En-coding Converter</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
2 years ago
|
<div>-->
|
||
|
|
|
||
|
|
<h1>Encoding Converter</h1>
|
||
|
|
<h2>Type a word, click 'convert' and let the en-coding magic begin!</h2>
|
||
|
2 years ago
|
</div>
|
||
|
|
|
||
|
2 years ago
|
<p>The table below is a look behind-the-scenes at what really happens when you type. You know, when you press a key and the computer somehow magically knows what you meant to say? Well, our buddy Javascript is here to break it down for you in all its nerdy glory.<br>
|
||
|
|
<br>
|
||
|
|
Get ready for some wild en-codings, including binary, hexadecimal, decimal, phonetic cyrillic (*Charlie-Yankee-Romeo-India-Lima-Lima-India-Charlie - say that five times fast!), and even the xpub1 emoji alphabet.
|
||
|
|
<br>
|
||
|
2 years ago
|
So kick back, relax, and let's dive into the wacky world of character en-coding. En-joy!</p>
|
||
|
|
|
||
|
2 years ago
|
<!-- adding table with all encodings -->
|
||
|
|
<form>
|
||
|
|
<label for="input">Input:</label>
|
||
|
|
<input type="text" id="input" name="input" placeholder="Type a word...">
|
||
|
2 years ago
|
<button onclick="convert();">Convert</button>
|
||
|
2 years ago
|
</form>
|
||
|
|
|
||
|
|
<!-- adding table with all encodings -->
|
||
|
|
<table id="result">
|
||
|
|
<tr>
|
||
|
|
<th>Binary</th>
|
||
|
|
<th>Hexadecimal</th>
|
||
|
|
<th>Decimal</th>
|
||
|
2 years ago
|
<th>Cyrillic*</th>
|
||
|
2 years ago
|
<th>Emoji</th>
|
||
|
|
</tr>
|
||
|
2 years ago
|
<tr>
|
||
|
|
<td id="BIN"></td>
|
||
|
|
<td id="HEX"></td>
|
||
|
|
<td id="DC"></td>
|
||
|
|
<td id="CY"></td>
|
||
|
|
<td id="E"></td>
|
||
|
|
</tr>
|
||
|
2 years ago
|
</table>
|
||
|
2 years ago
|
|
||
|
2 years ago
|
</body>
|
||
|
2 years ago
|
|
||
|
|
<!-- adding the js converter function -->
|
||
|
2 years ago
|
<script>
|
||
|
2 years ago
|
var d = {
|
||
|
|
'a': 'a',
|
||
|
|
'b': 'b',
|
||
|
|
'c': 'ts',
|
||
|
|
'd': 'd',
|
||
|
|
'e': 'e',
|
||
|
|
'f': 'f',
|
||
|
|
'g': 'g',
|
||
|
|
'h': 'h',
|
||
|
|
'i': 'i',
|
||
|
|
'k': 'k',
|
||
|
|
'l': 'l',
|
||
|
|
'm': 'm',
|
||
|
|
'n': 'n',
|
||
|
|
'o': 'o',
|
||
|
|
'p': 'p',
|
||
|
|
'q': 'ya',
|
||
|
|
'r': 'r',
|
||
|
|
's': 's',
|
||
|
|
't': 't',
|
||
|
|
'u': 'u',
|
||
|
|
'v': 'dzh',
|
||
|
|
'w': 'v',
|
||
|
|
'y': 'y',
|
||
|
|
'z': 'zh',
|
||
|
|
'`': 'ch',
|
||
|
|
']': 'sht',
|
||
|
|
'[': 'sh',
|
||
|
|
'|': 'yu',
|
||
|
2 years ago
|
' ': ' ',
|
||
|
2 years ago
|
}
|
||
|
|
e = {
|
||
|
2 years ago
|
' ': ' ',
|
||
|
|
'a': '📇',
|
||
|
2 years ago
|
'b': '🚝',
|
||
|
|
'c': '🚱',
|
||
|
|
'd': '🚯',
|
||
|
|
'e': '🛂',
|
||
|
|
'f': '🚞',
|
||
|
|
'g': '🚠',
|
||
|
|
'h': '🫃',
|
||
|
|
'i': '🪸',
|
||
|
|
'j': '🥟',
|
||
|
|
'k': '🧔♀️',
|
||
|
|
'l': '❤️🔥',
|
||
|
|
'm': '🉑',
|
||
|
|
'n': '🤡',
|
||
|
|
'o': '🔫',
|
||
|
|
'p': '⚰️',
|
||
|
|
'q': '🔣',
|
||
|
|
'r': '🤖',
|
||
|
|
's': '🦞',
|
||
|
|
't': '🛴',
|
||
|
|
'u': '🍶',
|
||
|
|
'v': '🪕',
|
||
|
|
'w': '📟',
|
||
|
|
'x': '🪅',
|
||
|
|
'y': '📫',
|
||
|
|
'z': '🥌',
|
||
|
|
'`': '🏵️',
|
||
|
|
']': '༎ຶ‿༎ຶ )',
|
||
|
|
'[': 'ଘ( ິ•ᆺ⃘• )ິଓ',
|
||
|
|
'|': '╭∩╮(ಠಠ)╭∩╮',
|
||
|
2 years ago
|
}
|
||
|
2 years ago
|
function convert(){
|
||
|
|
event.preventDefault();
|
||
|
|
var charles = document.getElementById("input").value;
|
||
|
2 years ago
|
var charlesBinary="";
|
||
|
|
var charlesHex="";
|
||
|
2 years ago
|
var charlesDec="";
|
||
|
2 years ago
|
var charlesCY="";
|
||
|
2 years ago
|
var charlesE="";
|
||
|
2 years ago
|
for (var i=0;i<charles.length;i++){
|
||
|
|
console.log(i,charles.charCodeAt(i));
|
||
|
|
charlesBinary=charlesBinary+charles.charCodeAt(i).toString(2);
|
||
|
|
charlesHex=charlesHex+charles.charCodeAt(i).toString(16);
|
||
|
2 years ago
|
charlesDec=charlesDec+charles.charCodeAt(i).toString(10);
|
||
|
|
if (d[charles[i]]==null){
|
||
|
|
charlesCY=charlesCY+"□";
|
||
|
|
}else{
|
||
|
|
charlesCY=charlesCY+d[charles[i]];
|
||
|
|
}
|
||
|
|
if (e[charles[i]]==null){
|
||
|
|
charlesE=charlesE+"□";
|
||
|
|
}else{
|
||
|
|
charlesE=charlesE+e[charles[i]];
|
||
|
|
}
|
||
|
2 years ago
|
}
|
||
|
2 years ago
|
console.log(charles,charlesBinary,charlesHex,charlesDec,charlesCY,charlesE);
|
||
|
|
document.getElementById("E").innerText=charlesE;
|
||
|
|
document.getElementById("BIN").innerText=charlesBinary;
|
||
|
|
document.getElementById("DC").innerText=charlesDec;
|
||
|
|
document.getElementById("HEX").innerText=charlesHex;
|
||
|
|
document.getElementById("CY").innerText=charlesCY;
|
||
|
2 years ago
|
var tr=document.createElement("tr");
|
||
|
|
tr.innerHTML="<td>"+charlesBinary+"</td>"+"<td>"+charlesHex+"</td>"+"<td>"+charlesDec+"</td>"+"<td>"+charlesCY+"</td>"+"<td>"+charlesE+"</td>";
|
||
|
|
document.getElementsByTagName("tbody")[0].append(tr);
|
||
|
2 years ago
|
}
|
||
|
|
</script>
|
||
|
2 years ago
|
</html>
|