144 lines
5.5 KiB
HTML
144 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="author" content="Felix W. Dekker" />
|
|
<meta name="application-name" content="Converter" />
|
|
<meta name="description" content="Converts numbers to and from various bases." />
|
|
<meta name="theme-color" content="#0033cc" />
|
|
|
|
<title>Converter | FWDekker</title>
|
|
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic"
|
|
crossorigin="anonymous" />
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
|
|
integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous" />
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.min.css"
|
|
integrity="sha256-Ro/wP8uUi8LR71kwIdilf78atpu8bTEwrK5ZotZo+Zc=" crossorigin="anonymous" />
|
|
<link rel="stylesheet" href="https://static.fwdekker.com/css/milligram-common.css" crossorigin="anonymous" />
|
|
</head>
|
|
<body>
|
|
<main class="wrapper">
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<section class="container">
|
|
<h1>Converter</h1>
|
|
<blockquote>
|
|
<p><em>Convert numbers to and from various bases.</em></p>
|
|
</blockquote>
|
|
</section>
|
|
</header>
|
|
|
|
|
|
<!-- Input -->
|
|
<section class="container">
|
|
<div class="row">
|
|
<div class="column">
|
|
<form>
|
|
<fieldset id="inputs">
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<section class="container">
|
|
Made by <a href="https://fwdekker.com/">Felix W. Dekker</a>.
|
|
Licensed under the
|
|
<a href="https://git.fwdekker.com/FWDekker/converter/src/branch/master/LICENSE">MIT License</a>.
|
|
Source code available on <a href="https://git.fwdekker.com/FWDekker/converter/">git</a>.
|
|
</section>
|
|
</footer>
|
|
</main>
|
|
|
|
|
|
<!-- Scripts -->
|
|
<script src="https://static.fwdekker.com/js/common.js" crossorigin="anonymous"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/big-integer/1.6.44/BigInteger.min.js"
|
|
integrity="sha256-es+ex6Oj344uak+VnCPyaHY2nzQkqhr7ByWVQgdjATA=" crossorigin="anonymous"></script>
|
|
<script>
|
|
class NumeralSystem {
|
|
constructor(base, alphabet, caseSensitive) {
|
|
this.base = base;
|
|
this.alphabet = alphabet;
|
|
this.caseSensitive = caseSensitive;
|
|
}
|
|
|
|
|
|
decimalToBase(decimalNumber) {
|
|
return decimalNumber.toString(this.base, this.alphabet);
|
|
}
|
|
|
|
baseToDecimal(baseString) {
|
|
return bigInt(baseString, this.base, this.alphabet, this.caseSensitive);
|
|
}
|
|
|
|
filterBaseString(baseString) {
|
|
return baseString.replace(new RegExp("[^" + this.alphabet + "]"), "");
|
|
}
|
|
}
|
|
|
|
class NumeralSystemInput {
|
|
constructor(name, numeralSystem) {
|
|
this.name = name;
|
|
this.numeralSystem = numeralSystem;
|
|
|
|
this.label = document.createElement("label");
|
|
this.label.setAttribute("for", `${this.name}Input`);
|
|
this.label.innerHTML = this.name;
|
|
|
|
this.textarea = document.createElement("textarea");
|
|
this.textarea.id = `${this.name}Input`;
|
|
this.textarea.className = "numberInput";
|
|
this.textarea.oninput = () => {
|
|
if (this.textarea.value === undefined || this.textarea.value === null)
|
|
return;
|
|
|
|
this.textarea.value = this.numeralSystem.filterBaseString(this.textarea.value);
|
|
updateAllInputs(this.numeralSystem.baseToDecimal(this.textarea.value));
|
|
};
|
|
}
|
|
|
|
|
|
addToParent(parent) {
|
|
parent.appendChild(this.label);
|
|
parent.appendChild(this.textarea);
|
|
}
|
|
|
|
update(decimalNumber) {
|
|
this.textarea.value = this.numeralSystem.decimalToBase(decimalNumber);
|
|
}
|
|
}
|
|
|
|
|
|
const inputs = [
|
|
new NumeralSystemInput("Binary", new NumeralSystem(2, "01")),
|
|
new NumeralSystemInput("Octal", new NumeralSystem(8, "01234567")),
|
|
new NumeralSystemInput("Decimal", new NumeralSystem(10, "0123456789")),
|
|
new NumeralSystemInput("Hexadecimal", new NumeralSystem(16, "0123456789abcdef", caseSensitive = false)),
|
|
new NumeralSystemInput("Base64", new NumeralSystem(64, "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/", caseSensitive = true)),
|
|
new NumeralSystemInput("ASCII", new NumeralSystem(256, new Array(256).fill(0).map((_, it) => String.fromCharCode(it)).join(""), caseSensitive = true)),
|
|
];
|
|
|
|
const updateAllInputs = newValue => {
|
|
for (const input of inputs)
|
|
input.update(newValue);
|
|
};
|
|
|
|
|
|
doAfterLoad(() => {
|
|
const inputParent = $("#inputs");
|
|
|
|
for (const input of inputs)
|
|
input.addToParent(inputParent);
|
|
|
|
inputs[0].textarea.focus();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|