Clean up code and implement Base64 and ASCII
This commit is contained in:
parent
9f2ce94527
commit
53501eeef1
124
index.html
124
index.html
|
@ -61,52 +61,92 @@
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/big-integer/1.6.44/BigInteger.min.js"
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/big-integer/1.6.44/BigInteger.min.js"
|
||||||
integrity="sha256-es+ex6Oj344uak+VnCPyaHY2nzQkqhr7ByWVQgdjATA=" crossorigin="anonymous"></script>
|
integrity="sha256-es+ex6Oj344uak+VnCPyaHY2nzQkqhr7ByWVQgdjATA=" crossorigin="anonymous"></script>
|
||||||
<script>
|
<script>
|
||||||
const alphabet = "0123456789abcdef";
|
class NumeralSystem {
|
||||||
|
constructor(base, alphabet) {
|
||||||
const updateAllInputs = newValue => {
|
this.base = base;
|
||||||
for (const numberInput of $a(".numberInput"))
|
this.alphabet = alphabet;
|
||||||
numberInput.value = newValue.toString(numberInput.getAttribute("data-base"), alphabet);
|
|
||||||
};
|
|
||||||
|
|
||||||
const createInput = (base, name) => {
|
|
||||||
const label = document.createElement("label");
|
|
||||||
label.setAttribute("for", `${name}Input`);
|
|
||||||
label.innerHTML = name;
|
|
||||||
|
|
||||||
const textarea = document.createElement("textarea");
|
|
||||||
textarea.id = `${name}Input`;
|
|
||||||
textarea.className = "numberInput";
|
|
||||||
textarea.setAttribute("data-base", base);
|
|
||||||
textarea.oninput = () => {
|
|
||||||
if (textarea.value === undefined || textarea.value === null)
|
|
||||||
return;
|
|
||||||
|
|
||||||
const inputAlphabet = alphabet.substring(0, base);
|
|
||||||
textarea.value = textarea.value.toLowerCase().replace(new RegExp("[^" + inputAlphabet + "]"), "");
|
|
||||||
updateAllInputs(bigInt(textarea.value, base));
|
|
||||||
};
|
|
||||||
|
|
||||||
return [label, textarea];
|
|
||||||
};
|
|
||||||
|
|
||||||
const addInput = (label, textarea) => {
|
|
||||||
const inputs = $("#inputs");
|
|
||||||
inputs.appendChild(label);
|
|
||||||
inputs.appendChild(textarea);
|
|
||||||
};
|
|
||||||
|
|
||||||
const generateInputs = () => {
|
|
||||||
const textareas = [["2", "Binary"], ["8", "Octal"], ["10", "Decimal"], ["16", "Hexadecimal"]];
|
|
||||||
|
|
||||||
for (const textarea of textareas) {
|
|
||||||
const elements = createInput(textarea[0], textarea[1]);
|
|
||||||
addInput(elements[0], elements[1]);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
$("#" + textareas[0][1] + "Input").focus();
|
|
||||||
|
decimalToBase(decimalNumber) {
|
||||||
|
return decimalNumber.toString(this.base, this.alphabet);
|
||||||
|
}
|
||||||
|
|
||||||
|
baseToDecimal(baseString) {
|
||||||
|
return bigInt(baseString, this.base, this.alphabet);
|
||||||
|
}
|
||||||
|
|
||||||
|
filterBaseString(baseString) {
|
||||||
|
return baseString.toLowerCase().replace(new RegExp("[^" + this.alphabet + "]"), "");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class AsciiNumeralSystem extends NumeralSystem {
|
||||||
|
constructor() {
|
||||||
|
let alphabet = "";
|
||||||
|
for (let i = 0; i < 256; i++)
|
||||||
|
alphabet += String.fromCharCode(i);
|
||||||
|
|
||||||
|
super(256, 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")),
|
||||||
|
new NumeralSystemInput("Base64", new NumeralSystem(64, "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/")),
|
||||||
|
new NumeralSystemInput("ASCII", new AsciiNumeralSystem()),
|
||||||
|
];
|
||||||
|
|
||||||
|
const updateAllInputs = newValue => {
|
||||||
|
for (const input of inputs)
|
||||||
|
input.update(newValue);
|
||||||
};
|
};
|
||||||
|
|
||||||
doAfterLoad(() => generateInputs());
|
|
||||||
|
doAfterLoad(() => {
|
||||||
|
const inputParent = $("#inputs");
|
||||||
|
|
||||||
|
for (const input of inputs)
|
||||||
|
input.addToParent(inputParent);
|
||||||
|
|
||||||
|
inputs[0].textarea.focus();
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
Loading…
Reference in New Issue