Implement basic functionality
This commit is contained in:
parent
dd47972374
commit
befca5d0a8
|
@ -0,0 +1,104 @@
|
|||
<!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>
|
||||
const updateAllInputs = newValue => {
|
||||
for (const numberInput of $a(".numberInput"))
|
||||
numberInput.value = newValue.toString(numberInput.getAttribute("data-base"));
|
||||
};
|
||||
|
||||
const createTextarea = (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)
|
||||
updateAllInputs(bigInt(textarea.value, base));
|
||||
};
|
||||
|
||||
return [label, textarea];
|
||||
};
|
||||
|
||||
const addTextarea = (label, textarea) => {
|
||||
const inputs = $("#inputs");
|
||||
inputs.appendChild(label);
|
||||
inputs.appendChild(textarea);
|
||||
};
|
||||
|
||||
const generateTextareas = () => {
|
||||
const textareas = [["2", "Binary"], ["8", "Octal"], ["10", "Decimal"], ["16", "Hexadecimal"]];
|
||||
|
||||
for (const textarea of textareas) {
|
||||
const elements = createTextarea(textarea[0], textarea[1]);
|
||||
addTextarea(elements[0], elements[1]);
|
||||
}
|
||||
};
|
||||
|
||||
doAfterLoad(() => generateTextareas());
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in New Issue