first commit
This commit is contained in:
Christian Lawson-Perfect
commit
45faac5b14
4 changed files with 603 additions and 0 deletions
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
.make.*
|
||||
26
index.html
Normal file
26
index.html
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<title>Numeral conversion</title>
|
||||
<script type="module" src="script.js"></script>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div id="decimal-container">
|
||||
<label for="decimal">Western Arabic</label>
|
||||
<input type="number" id="decimal" min="0" value="2025">
|
||||
</div>
|
||||
<dl id="systems">
|
||||
</dl>
|
||||
</main>
|
||||
<footer>
|
||||
<p>This page renders your chosen number in as many numeral systems as it can.</p>
|
||||
<p>I've mainly worked off wikipedia and don't have real-life experience of most of these systems, so it's quite likely that it gets some things wrong.</p>
|
||||
<p>If you have a correction, please <a href="mailto:christian+numerals@lawson-perfect.uk">email me</a>.</p>
|
||||
<p>made by <a href="https://somethingorotherwhatever.com">clp</a></h1>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
536
script.js
Normal file
536
script.js
Normal file
|
|
@ -0,0 +1,536 @@
|
|||
function span(first, n=10) {
|
||||
return [...new Array(n)].map((_,i) => first.slice(0,first.length-1)+String.fromCharCode(first.charCodeAt(first.length-1) + i));
|
||||
}
|
||||
|
||||
function positional_unicode_span(name, zero, base=10n, extra) {
|
||||
// Make a function to render a positional number system whose digits are in a contiguous span of unicode code points.
|
||||
return Object.assign({
|
||||
name,
|
||||
fn: (n) => {
|
||||
let o = '';
|
||||
if(n==0n) {
|
||||
return zero;
|
||||
}
|
||||
while(n) {
|
||||
const d = n % base;
|
||||
n = (n - d)/base;
|
||||
const c = zero.slice(0,zero.length-1) + String.fromCharCode(zero.charCodeAt(zero.length-1) + Number(d));
|
||||
o = c + o;
|
||||
}
|
||||
return o;
|
||||
}
|
||||
}, extra || {})
|
||||
}
|
||||
|
||||
function positional_symbols(name, symbols) {
|
||||
// Make a function to render a positional number system whose digits are drawn from the given string.
|
||||
return {
|
||||
name,
|
||||
fn: (n) => {
|
||||
let o = '';
|
||||
const base = BigInt(symbols.length);
|
||||
if(n == 0n) {
|
||||
return symbols[0];
|
||||
}
|
||||
|
||||
while(n) {
|
||||
const d = n % base;
|
||||
n = (n - d)/base;
|
||||
o = symbols[d] + o;
|
||||
}
|
||||
return o;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function concatenative(power_lists, base=10n) {
|
||||
return function(n) {
|
||||
if(n==0n) {
|
||||
return '';
|
||||
}
|
||||
|
||||
let o = '';
|
||||
for(let symbols of power_lists) {
|
||||
|
||||
const r = n % 10n;
|
||||
if(r > symbols.length) {
|
||||
return '???';
|
||||
|
||||
}
|
||||
if(r > 0n) {
|
||||
o = symbols[Number(r)-1] + o;
|
||||
}
|
||||
n = (n-r) / 10n;
|
||||
}
|
||||
if(n) {
|
||||
return '???';
|
||||
}
|
||||
return o;
|
||||
}
|
||||
}
|
||||
|
||||
function chinese_system(zero,units, powers_of_ten, powers_of_myriad) {
|
||||
return (n => {
|
||||
if(n==0n) {
|
||||
return zero;
|
||||
}
|
||||
|
||||
let o = '';
|
||||
for(let m of powers_of_myriad) {
|
||||
if(n % 10000n == 0n) {
|
||||
n = n / 10000n;
|
||||
continue;
|
||||
}
|
||||
o = m + o;
|
||||
const u = n % 10n;
|
||||
n = (n-u) / 10n;
|
||||
o = (u > 1 || m=='' ? units[u] : '') + o;
|
||||
for(let pow of powers_of_ten) {
|
||||
if(n==0n) {
|
||||
break;
|
||||
}
|
||||
const d = n % 10n;
|
||||
n = (n-d) / 10n;
|
||||
if(d > 0n) {
|
||||
o = (d>1 ? units[d] : '') + pow + o;
|
||||
}
|
||||
}
|
||||
}
|
||||
if(n) {
|
||||
return '???';
|
||||
}
|
||||
return o;
|
||||
})
|
||||
}
|
||||
|
||||
const systems = {
|
||||
cuneiform: {
|
||||
name: 'Cuneiform',
|
||||
fn: (n) => {
|
||||
const tens = [ "", "𒌋", "𒎙", "𒌍", "𒐏", "𒐐" ];
|
||||
const ones = [ "", "𒐕", "𒐖", "𒐗", "𒐘", "𒐙", "𒐚", "𒐛", "𒐜", "𒐝" ];
|
||||
|
||||
let bits = [];
|
||||
while(n) {
|
||||
const u = n%10n;
|
||||
n = (n-u)/10n;
|
||||
const t = n % 6n;
|
||||
n = (n-t)/6n;
|
||||
bits.splice(0,0,tens[t] + ones[u]);
|
||||
}
|
||||
return bits.join('\u{3000}');
|
||||
}
|
||||
},
|
||||
|
||||
arabic: positional_unicode_span('Eastern Arabic', '٠'),
|
||||
|
||||
roman: {
|
||||
name: 'Roman',
|
||||
fn: concatenative([
|
||||
['Ⅰ', 'Ⅱ', 'Ⅲ', 'Ⅳ', 'Ⅴ', 'Ⅵ', 'Ⅶ', 'Ⅷ', 'Ⅸ'],
|
||||
['Ⅹ', 'ⅩⅩ', 'ⅩⅩⅩ', 'ⅩⅬ', 'Ⅼ', 'ⅬⅩ', 'ⅬⅩⅩ', 'ⅬⅩⅩⅩ', 'ⅩⅭ'],
|
||||
['Ⅽ', 'ⅭⅭ', 'ⅭⅭⅭ', 'ⅭⅮ', 'Ⅾ', 'ⅮⅭ', 'ⅮⅭⅭ', 'ⅮⅭⅭⅭ', 'ⅭⅯ' ],
|
||||
['Ⅿ', 'ⅯⅯ', 'ⅯⅯⅯ']
|
||||
])
|
||||
},
|
||||
|
||||
hieratic: {
|
||||
name: 'Egyptian hieroglyphs',
|
||||
fn: concatenative([
|
||||
['', '𓏺', '𓏻', '𓏼', '𓏽', '𓏾', '𓏿', '𓐀', '𓐁', '𓐂'],
|
||||
span('𓎆'),
|
||||
span('𓍢'),
|
||||
span('𓆼'),
|
||||
span('𓂭'),
|
||||
['𓆐', '𓆐𓆐', '𓆐𓆐𓆐', '𓆐𓆐𓆐𓆐', '𓆐𓆐𓆐𓆐𓆐', '𓆐𓆐𓆐𓆐𓆐𓆐', '𓆐𓆐𓆐𓆐𓆐𓆐𓆐', '𓆐𓆐𓆐𓆐𓆐𓆐𓆐𓆐', '𓆐𓆐𓆐𓆐𓆐𓆐𓆐𓆐𓆐'],
|
||||
['𓁨', '𓁨𓁨', '𓁨𓁨𓁨', '𓁨𓁨𓁨𓁨', '𓁨𓁨𓁨𓁨𓁨', '𓁨𓁨𓁨𓁨𓁨𓁨', '𓁨𓁨𓁨𓁨𓁨𓁨𓁨', '𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨', '𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨𓁨']
|
||||
])
|
||||
},
|
||||
|
||||
aegean: {
|
||||
name: 'Aegean',
|
||||
fn: concatenative([
|
||||
span('𐄇'),
|
||||
span('𐄐'),
|
||||
span('𐄙'),
|
||||
span('𐄢'),
|
||||
span('𐄫'),
|
||||
|
||||
])
|
||||
},
|
||||
|
||||
hebrew: {
|
||||
name: 'Hebrew',
|
||||
fn: (n) => {
|
||||
if(n >= 10000n) {
|
||||
return '???';
|
||||
}
|
||||
const ones = [ "א", "ב", "ג", "ד", "ה", "ו", "ז", "ח", "ט" ];
|
||||
const tens = [ "י", "ך", "ל", "ם", "ן", "ס", "ע", "ף", "ץ" ];
|
||||
const hundreds = [ "ק", "ר", "ש", "ת", "תק", "תר", "תש", "תתק", "תתר" ];
|
||||
const thousands = [`א׳`,`ב׳`,`אב׳`,`בב׳`,`ה׳`,`אה׳`,`בה׳`,`אה׳`,`בבה׳`];
|
||||
if(n==0n) {
|
||||
return '';
|
||||
}
|
||||
|
||||
let o = '';
|
||||
for(let symbols of [ones,tens,hundreds,thousands]) {
|
||||
console.log(symbols, n);
|
||||
if(n==0n) {
|
||||
break;
|
||||
}
|
||||
const d = n % 10n;
|
||||
n = (n-d) / 10n;
|
||||
if(d > 0n) {
|
||||
o = symbols[Number(d)-1] + o;
|
||||
}
|
||||
}
|
||||
return o;
|
||||
}
|
||||
},
|
||||
|
||||
greek: {
|
||||
name: 'Greek',
|
||||
fn: concatenative([
|
||||
["Αʹ", "Βʹ", "Γʹ", "Δʹ", "Εʹ", "Ϛʹ", "Ζʹ", "Ηʹ", "Θʹ" ],
|
||||
["Ιʹ", "Κʹ", "Λʹ", "Μʹ", "Νʹ", "Ξʹ", "Οʹ", "Πʹ", "Ϟʹ"],
|
||||
[ "Ρʹ", "Σʹ", "Τʹ", "Υʹ", "Φʹ", "Χʹ", "Ψʹ", "Ωʹ", "Ϡʹ" ],
|
||||
[ "͵Α", "͵Β", ",Γ", "͵Δ", "͵Ε", "͵Ϛ͵ΣΤ", "͵Ζ", "͵Η", "͵Θ" ],
|
||||
[ "͵Ι", "͵Κ", "͵Λ", "͵Μ", "͵Ν", "͵Ξ", "͵Ο", "͵Π", "͵Ϟ" ],
|
||||
[ "͵Ρ", "͵Σ", "͵Τ", "͵Υ", "͵Φ", "͵Χ", "͵Ψ", "͵Ω", "͵Ϡ" ]
|
||||
])
|
||||
},
|
||||
|
||||
chinese: {
|
||||
name: 'Chinese',
|
||||
fn: chinese_system(
|
||||
'〇',
|
||||
[ '', '一', '二', '三', '四', '五', '六', '七', '八', '九' ],
|
||||
[ '十', '百', '千' ],
|
||||
[ '', '万', '亿', '兆', '京', '垓', '秭', '穰', '沟', '涧', '正', '载' ]
|
||||
)
|
||||
},
|
||||
|
||||
counting_rod_horizontal: positional_symbols('Counting rod (horizontal)', ['〇'].concat(span('𝍠',9))),
|
||||
|
||||
counting_rod_vertical: positional_symbols('Counting rod (vertical)', ['〇'].concat(span('𝍩',9)), 10n, {orientation: 'vertical-lr'}),
|
||||
|
||||
suzhou: {
|
||||
name: 'Suzhou',
|
||||
fn: (n) => {
|
||||
const zero = '〇';
|
||||
|
||||
if(n==0n) {
|
||||
return zero;
|
||||
}
|
||||
|
||||
let o = '';
|
||||
while(n) {
|
||||
const d = n % 10n;
|
||||
n = (n - d) / 10n;
|
||||
o = (d==0n ? zero : String.fromCharCode(0x3020 + Number(d))) + o;
|
||||
}
|
||||
|
||||
return o;
|
||||
}
|
||||
},
|
||||
|
||||
ethiopic: {
|
||||
name: 'Ethiopic',
|
||||
fn: concatenative([
|
||||
span('፩',9),
|
||||
span('፲',9),
|
||||
span('፩',9).map(x => x +'፻'),
|
||||
span('፲',9).map(x => x +'፻'),
|
||||
span('፩',9).map(x => x +'፼'),
|
||||
span('፲',9).map(x => x +'፼'),
|
||||
])
|
||||
},
|
||||
|
||||
kharosthi: {
|
||||
name: 'Kharosthi',
|
||||
fn: (n) => {
|
||||
const ones = [ "𐩀", "𐩁", "𐩂", "𐩃", "𐩃𐩀", "𐩃𐩁", "𐩃𐩂", "𐩃𐩃", "𐩃𐩃𐩀", "𐩃𐩃𐩁" ];
|
||||
const tens = ["𐩄","𐩅","𐩅𐩄","𐩅𐩅","𐩅𐩅𐩄","𐩅𐩅𐩅","𐩅𐩅𐩅𐩄","𐩅𐩅𐩅𐩅","𐩅𐩅𐩅𐩅𐩄"];
|
||||
if(n == 0) {
|
||||
return '';
|
||||
}
|
||||
let o = '';
|
||||
const u = n % 10n;
|
||||
n = (n - u) / 10n;
|
||||
o = (u > 0 ? ones[u - 1n] : '') + o;
|
||||
const t = n % 10n;
|
||||
n = (n - t) / 10n;
|
||||
o = (t > 0 ? tens[t - 1n] : '') + o;
|
||||
const h = n % 10n;
|
||||
n = (n - h) / 10n;
|
||||
o = (h > 0 ? (h > 1 ? ones[h - 1n] : '') + "𐩆" : '') + o;
|
||||
const th = n % 10n;
|
||||
n = (n - th) / 10n;
|
||||
o = (th > 0 ? (th > 1 ? ones[th - 1n] : '') + "𐩇" : '') + o;
|
||||
|
||||
return o;
|
||||
}
|
||||
},
|
||||
|
||||
phoenician: {
|
||||
name: 'Phoenician',
|
||||
fn: concatenative([
|
||||
["𐤖","𐤚","𐤛","𐤛𐤖","𐤛𐤚","𐤛𐤛","𐤛𐤛𐤖","𐤛𐤛𐤚","𐤛𐤛𐤛",],
|
||||
["𐤗","𐤘","𐤘𐤗","𐤘𐤘","𐤘𐤘𐤗","𐤘𐤘𐤘","𐤘𐤘𐤘𐤗","𐤘𐤘𐤘𐤘","𐤘𐤘𐤘𐤘𐤗"],
|
||||
["𐤙","𐤚𐤙","𐤛𐤙","𐤛𐤖𐤙","𐤛𐤚𐤙","𐤛𐤛𐤙","𐤛𐤛𐤖𐤙","𐤛𐤛𐤚𐤙","𐤛𐤛𐤛𐤙"],
|
||||
["𐤙","𐤘𐤙","𐤘𐤗𐤙","𐤘𐤘𐤙","𐤘𐤘𐤗𐤙","𐤘𐤘𐤘𐤙","𐤘𐤘𐤘𐤗𐤙","𐤘𐤘𐤘𐤘𐤙","𐤘𐤘𐤘𐤘𐤗𐤙"]
|
||||
])
|
||||
},
|
||||
|
||||
armenian: {
|
||||
name: 'Armenian',
|
||||
fn: concatenative([
|
||||
['Ա','Բ','Գ','Դ','Ե','Զ','Է','Ը','Թ'],
|
||||
['Ժ','Ի','Լ','Խ','Ծ','Կ','Հ','Ձ','Ղ'],
|
||||
['Ճ', 'Մ', 'Յ', 'Ն', 'Շ', 'Ո', 'Չ', 'Պ', 'Ջ'],
|
||||
['Ռ', 'Ս', 'Վ', 'Տ', 'Ր', 'Ց', 'Ւ', 'Փ', 'Ք'],
|
||||
['Օ', 'Ֆ']
|
||||
])
|
||||
},
|
||||
|
||||
abjad: {
|
||||
name: 'Arabic abjad',
|
||||
fn: concatenative([
|
||||
["ا","ب","جـ","د","هـ","و","ز","حـ","ط"],
|
||||
["ى","ك","ل","مـ","ن","س","ع","ف","ص"],
|
||||
["ق","ر","ش","ت","ث","خـ","ذ","ض","ظ"]
|
||||
])
|
||||
},
|
||||
|
||||
glagolitic: {
|
||||
name: 'Glagolitic',
|
||||
fn: concatenative([
|
||||
span('Ⰰ',9),
|
||||
span('Ⰹ',9),
|
||||
span('Ⱃ',9),
|
||||
span('Ⱍ',9),
|
||||
])
|
||||
},
|
||||
|
||||
cyrillic: {
|
||||
name: 'Cyrillic',
|
||||
fn: (() => {
|
||||
const units = ["А","В","Г","Д","Є","Ѕ","З","И","Ѳ"];
|
||||
const tens = ["І","К","Л","М","Н","Ѯ","Ѻ","П","Ч"];
|
||||
const hundreds = ["Р","С","Т","У","Ф","Х","Ѱ","Ѡ","Ц"];
|
||||
return concatenative([
|
||||
units,
|
||||
tens,
|
||||
hundreds,
|
||||
units.map(x => x+'҂'),
|
||||
units.map(x => x+"\u200d\u20dd "),
|
||||
units.map(x => x+'\u200d\u0488 '),
|
||||
units.map(x => x+'\u200d\u0489 '),
|
||||
units.map(x => x+'\u200d\ua670 '),
|
||||
units.map(x => x+'\u200d\ua671 '),
|
||||
units.map(x => x+'\u200d\ua672 '),
|
||||
])
|
||||
})()
|
||||
},
|
||||
|
||||
tangut: {
|
||||
name: 'Tangut',
|
||||
fn: chinese_system(
|
||||
'',
|
||||
['',"𘈩","𗍫","𘕕","𗥃","𗏁","𗤁","𗒹","𘉋","𗢭"],
|
||||
['𗰗', '𘊝', '𗡞'],
|
||||
['', '𗕑', '𗦲']
|
||||
)
|
||||
},
|
||||
|
||||
hangul: {
|
||||
name: 'Hangul',
|
||||
fn: chinese_system(
|
||||
'영',
|
||||
['',"일","이","삼","사","오","육, 륙","칠","팔","구"],
|
||||
['십','백','천'],
|
||||
['','만','억','조','경','해','자','양','구','간','정','재','극','항하사','아승기','나유타','불가사의','무량대수']
|
||||
)
|
||||
},
|
||||
|
||||
// TODO: Cistercian (needs SVG?)
|
||||
|
||||
// TODO: Pentadic numerals (needs SVG?)
|
||||
|
||||
rumi: positional_unicode_span('Rumi', '𐹠'),
|
||||
|
||||
mayan: positional_unicode_span('Mayan', '𝋠', 20n, {orientation: 'vertical-lr'}),
|
||||
|
||||
nko: positional_unicode_span('N\'Ko', '߀'),
|
||||
|
||||
devanagari: positional_unicode_span('Devanagari', '०'),
|
||||
|
||||
bengali: positional_unicode_span('Bengali', '০'),
|
||||
|
||||
gurmukhi: positional_unicode_span('Gurmukhi','੦'),
|
||||
|
||||
gujarati: positional_unicode_span('Gujarati', '૦'),
|
||||
|
||||
odia: positional_unicode_span('Odia', '୦'),
|
||||
|
||||
tamil: positional_unicode_span('Tamil', '௦'),
|
||||
|
||||
telugu: positional_unicode_span('Telugu', '౦'),
|
||||
|
||||
kannada: positional_unicode_span('Kannada', '೦'),
|
||||
|
||||
malayalam: positional_unicode_span('Malayalam', '൦'),
|
||||
|
||||
thai: positional_unicode_span('Thai', '๐'),
|
||||
|
||||
lao: positional_unicode_span('Lao', '໐'),
|
||||
|
||||
tibetan: positional_unicode_span('Tibetan', '༠'),
|
||||
|
||||
burmese: positional_unicode_span('Burmese', '၀'),
|
||||
|
||||
khmer: positional_unicode_span('Khmer', '០'),
|
||||
|
||||
mongolian: positional_unicode_span('Mongolian', '᠐'),
|
||||
|
||||
limbu: positional_unicode_span('Limbu', '᥆'),
|
||||
|
||||
new_tai_lue: positional_unicode_span('New Tai Lue', '᧐'),
|
||||
|
||||
lek_hora: positional_unicode_span('Lek Hora','᪀'),
|
||||
|
||||
lek_nai_tham: positional_unicode_span('Lek Nai Tham', '᪐'),
|
||||
|
||||
balinese: positional_unicode_span('Balinese', '᭐'),
|
||||
|
||||
sundanese: positional_unicode_span('Sundanese', '᮰'),
|
||||
|
||||
lepcha: positional_unicode_span('Lepcha', '᱀'),
|
||||
|
||||
ol_chiki: positional_unicode_span('Ol Chiki', '᱐'),
|
||||
|
||||
vai: positional_unicode_span('Vai', '꘠'),
|
||||
|
||||
saurashtra: positional_unicode_span('Saurashtra', '꣐'),
|
||||
|
||||
kayah_li: positional_unicode_span('Kayah Li', '꤀'),
|
||||
|
||||
javanese: positional_unicode_span('Javanese', '꧐'),
|
||||
|
||||
cham: positional_unicode_span('Cham', '꩐'),
|
||||
|
||||
meitei: positional_unicode_span('meitei', '꯰'),
|
||||
|
||||
osmanya: positional_unicode_span('Osmanya', '𐒠'),
|
||||
|
||||
brahmi: positional_unicode_span('Brahmi', '𑁦'),
|
||||
|
||||
sorang_sompeng: positional_unicode_span('Sorang Sompeng', '𑃰'),
|
||||
|
||||
chakma: positional_unicode_span('Chakma', '𑄶'),
|
||||
|
||||
sharada: positional_unicode_span('Sharada', '𑇐'),
|
||||
|
||||
takri: positional_unicode_span('Takri', '𑛀'),
|
||||
|
||||
sinhala: positional_unicode_span('Sinhala', '෦'),
|
||||
|
||||
tai_laing: positional_unicode_span('Tai Laing', '꧰'),
|
||||
|
||||
khudabadi: positional_unicode_span('Khudabadi', '𑋰'),
|
||||
|
||||
tirhuta: positional_unicode_span('Tirhuta', '𑓐'),
|
||||
|
||||
modi: positional_unicode_span('Modi', '𑙐'),
|
||||
|
||||
warang_citi: positional_unicode_span('Warang Citi', '𑣠'),
|
||||
|
||||
mro: positional_unicode_span('Mro', '𖩠'),
|
||||
|
||||
pahawh_hmong: positional_unicode_span('Pahawh Hmong', '𖭐'),
|
||||
|
||||
ahom: positional_unicode_span('Tai Ahom', '𑜰'),
|
||||
|
||||
prachalit: positional_unicode_span('Prachalit', '𑑐'),
|
||||
|
||||
hanifi_rohingya: positional_unicode_span('Hanifi Rohingya', '𐴰'),
|
||||
|
||||
bhaiksuki: positional_unicode_span('Bhaiksuki', '𑱐'),
|
||||
|
||||
masaram_gondi: positional_unicode_span('Masaram Gondi', '𑵐'),
|
||||
|
||||
gunjala_gondi: positional_unicode_span('Gunjala Gondi', '𑶠'),
|
||||
|
||||
medefaidrin: positional_unicode_span('Medefaidrin', '𖺀', 20n),
|
||||
|
||||
nyiakeng_puachue_hmong: positional_unicode_span('Nyiakeng Puachue Hmong', '𞅀'),
|
||||
|
||||
wancho: positional_unicode_span('Wancho', '𞋰'),
|
||||
|
||||
adlam: positional_unicode_span('Adlam', '𞥐'),
|
||||
|
||||
kaktovik: positional_unicode_span('Kaktovik', '𝋀', 20n),
|
||||
|
||||
// garay: positional_unicode_span('Garay', ''), //(not in noto??)
|
||||
|
||||
binary: {
|
||||
name: 'Binary',
|
||||
fn: (n) => n.toString(2),
|
||||
},
|
||||
|
||||
octal: {
|
||||
name: 'Octal',
|
||||
fn: (n) => n.toString(8),
|
||||
},
|
||||
|
||||
hexadecimal: {
|
||||
name: 'Hexadecimal',
|
||||
fn: (n) => n.toString(16),
|
||||
},
|
||||
|
||||
balanced_ternary: {
|
||||
name: 'Balanced ternary',
|
||||
fn: (n) => {
|
||||
let o = '';
|
||||
while(n) {
|
||||
const r = n % 3n;
|
||||
n = (n - r) / 3n;
|
||||
if(r == 2) {
|
||||
n += 1n;
|
||||
}
|
||||
o = ['0','+','-'][r] + o;
|
||||
}
|
||||
return o;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const dl = document.getElementById('systems');
|
||||
|
||||
Object.entries(systems).forEach(([id, entry]) => {
|
||||
const {name, orientation} = entry;
|
||||
const dt = document.createElement('dt');
|
||||
dt.textContent = name;
|
||||
dl.append(dt);
|
||||
const dd = document.createElement('dd');
|
||||
if(orientation) {
|
||||
dd.style['writing-mode'] = orientation;
|
||||
}
|
||||
dl.append(dd);
|
||||
entry.dd = dd;
|
||||
})
|
||||
|
||||
function update() {
|
||||
const n = BigInt(decimal_input.value || '0');
|
||||
Object.values(systems).forEach(({name,fn,dd}) => {
|
||||
console.log(name);
|
||||
dd.textContent = fn(n);
|
||||
});
|
||||
}
|
||||
|
||||
const decimal_input = document.getElementById('decimal');
|
||||
|
||||
update();
|
||||
|
||||
decimal_input.addEventListener('input', update);
|
||||
40
style.css
Normal file
40
style.css
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
@import 'https://fonts.googleapis.com/css2?family=Noto+Sans+Symbols+2&family=Noto+Sans+Symbols:wght@100..900&display=swap';
|
||||
|
||||
:root {
|
||||
--spacing: 1em;
|
||||
|
||||
color-scheme: light dark;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif, 'Noto Sans Symbols', 'Noto Sans Symbols 2';
|
||||
background: Canvas;
|
||||
}
|
||||
|
||||
dl {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, 7em 10em);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1em 0.5em;
|
||||
}
|
||||
dt, label {
|
||||
text-align: end;
|
||||
font-weight: bold;
|
||||
}
|
||||
dd {
|
||||
margin: 0;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 20svh;
|
||||
}
|
||||
|
||||
#decimal-container {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: Canvas;
|
||||
text-align: center;
|
||||
padding: var(--spacing);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue