Skip to content

Instantly share code, notes, and snippets.

@mlebkowski
Last active December 6, 2025 12:48
Show Gist options
  • Select an option

  • Save mlebkowski/907ddffc05ffb9c4a531db06f34b9a09 to your computer and use it in GitHub Desktop.

Select an option

Save mlebkowski/907ddffc05ffb9c4a531db06f34b9a09 to your computer and use it in GitHub Desktop.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<meta charset="utf-8">
<div class="container-fluid">
<div class="row mt-5">
<div class="col">
<select class="form-control mb-2">
<option selected>IVXLCDM</option>
<option>πŸΆπŸ¦πŸ«ŽπŸ¦„πŸ½πŸπŸ¬</option>
</select>
<input type="number" class=form-control max="3999" min=0>
<h2 class="mt-5 text-center">
<code></code>
</h2>
</div>
</div>
</div>
<script>
const letterSet = document.querySelector('select');
const input = document.querySelector('input');
const code = document.querySelector('code');
function calculate() {
const number = parseInt(input.value);
if (number > 3_999 || number < 0) {
code.innerText = "β˜ƒοΈ";
return;
}
const alphabet = letterSet.value;
const romanNumerals = Array
.from({ length: Math.ceil([...alphabet].length / 2) })
.map((_, i) => [...alphabet].slice(i*2, i*2+3));
const result = romanNumerals.map(([I, V, X], i) => {
const pow = Math.pow(10, i);
const digit = Math.floor(number % (pow * 10) / pow);
return {
1: `${I}`,
2: `${I}${I}`,
3: `${I}${I}${I}`,
4: `${I}${V}`,
5: `${V}`,
6: `${V}${I}`,
7: `${V}${I}${I}`,
8: `${V}${I}${I}${I}`,
9: `${I}${X}`,
0: "",
}[digit];
}).reverse().join("");
code.innerText = result;
};
input.addEventListener('keyup', calculate);
letterSet.addEventListener('change', calculate);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment