2019-07-01 21:23:28 +02:00
<!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 >
2019-07-08 18:25:09 +02:00
class NumeralSystem {
2019-07-08 18:58:08 +02:00
constructor(base, alphabet, caseSensitive) {
2019-07-08 18:25:09 +02:00
this.base = base;
this.alphabet = alphabet;
2019-07-08 18:58:08 +02:00
this.caseSensitive = caseSensitive;
2019-07-08 18:25:09 +02:00
}
2019-07-01 23:58:30 +02:00
2019-07-01 21:23:28 +02:00
2019-07-08 18:25:09 +02:00
decimalToBase(decimalNumber) {
return decimalNumber.toString(this.base, this.alphabet);
}
2019-07-01 21:23:28 +02:00
2019-07-08 18:25:09 +02:00
baseToDecimal(baseString) {
2019-07-08 18:58:08 +02:00
return bigInt(baseString, this.base, this.alphabet, this.caseSensitive);
2019-07-08 18:25:09 +02:00
}
filterBaseString(baseString) {
2019-07-08 18:58:08 +02:00
return baseString.replace(new RegExp("[^" + this.alphabet + "]"), "");
2019-07-08 18:25:09 +02:00
}
}
2019-07-01 21:23:28 +02:00
2019-07-08 18:25:09 +02:00
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));
};
}
2019-07-01 23:58:30 +02:00
2019-07-08 18:25:09 +02:00
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")),
2019-07-08 18:58:08 +02:00
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)),
2019-07-08 18:25:09 +02:00
];
const updateAllInputs = newValue => {
for (const input of inputs)
input.update(newValue);
2019-07-01 21:23:28 +02:00
};
2019-07-08 18:25:09 +02:00
doAfterLoad(() => {
const inputParent = $("#inputs");
for (const input of inputs)
input.addToParent(inputParent);
inputs[0].textarea.focus();
});
2019-07-01 21:23:28 +02:00
< / script >
< / body >
< / html >