NUMBER BASE CONVERTER

Standalone, zero-dependency JavaScript implementation powering this tool. Free to inspect, copy, and build upon.

let bitWidth = 0;

  function setBits(n) {
    bitWidth = n;
    document.querySelectorAll('.bit-btn').forEach((b, i) => {
      b.classList.toggle('active', [0,8,16,32,64][i] === n);
    });
    const dec = document.getElementById('dec').value;
    if (dec) fromDec(dec);
  }

  function pad(bin) {
    if (!bitWidth) return bin;
    return bin.padStart(bitWidth, '0').slice(-bitWidth);
  }

  function setFields(decVal) {
    const n = BigInt(decVal);
    document.getElementById('bin').value = pad(n.toString(2));
    document.getElementById('oct').value = n.toString(8);
    document.getElementById('hex').value = n.toString(16).toUpperCase();
  }

  function showErr(msg) {
    const el = document.getElementById('errMsg');
    el.textContent = msg; el.style.display = msg ? '' : 'none';
  }

  function fromDec(v) {
    showErr('');
    const s = v.replace(/[\s,]/g, '');
    if (!s) { clearAll(); return; }
    try { const n = BigInt(s); setFields(n); }
    catch { showErr('Invalid decimal number.'); }
  }

  function fromBin(v) {
    showErr('');
    const s = v.replace(/[\s]/g, '');
    if (!s) { clearAll(); return; }
    if (!/^[01]+$/.test(s)) { showErr('Invalid binary — only 0 and 1 allowed.'); return; }
    const n = BigInt('0b' + s);
    document.getElementById('dec').value = n.toString(10);
    document.getElementById('oct').value = n.toString(8);
    document.getElementById('hex').value = n.toString(16).toUpperCase();
  }

  function fromOct(v) {
    showErr('');
    const s = v.replace(/[\s]/g, '');
    if (!s) { clearAll(); return; }
    if (!/^[0-7]+$/.test(s)) { showErr('Invalid octal — digits 0–7 only.'); return; }
    const n = BigInt('0o' + s);
    document.getElementById('dec').value = n.toString(10);
    document.getElementById('bin').value = pad(n.toString(2));
    document.getElementById('hex').value = n.toString(16).toUpperCase();
  }

  function fromHex(v) {
    showErr('');
    const s = v.replace(/[\s]/g, '');
    if (!s) { clearAll(); return; }
    if (!/^[0-9a-fA-F]+$/.test(s)) { showErr('Invalid hex — digits 0–9 and A–F only.'); return; }
    const n = BigInt('0x' + s);
    document.getElementById('dec').value = n.toString(10);
    document.getElementById('bin').value = pad(n.toString(2));
    document.getElementById('oct').value = n.toString(8);
  }

  function clearAll() {
    ['dec','bin','oct','hex'].forEach(id => { if (document.activeElement.id !== id) document.getElementById(id).value = ''; });
  }

  function fromCustom() {
    const base = parseInt(document.getElementById('customBase').value);
    const val = document.getElementById('customVal').value.trim();
    if (!val || isNaN(base) || base < 2 || base > 36) { document.getElementById('customResult').innerHTML = '—'; return; }
    try {
      const n = parseInt(val, base);
      if (isNaN(n)) throw new Error();
      document.getElementById('customResult').innerHTML =
        `Base ${base} <span>${val.toUpperCase()}</span> = Decimal <span>${n}</span> = Hex <span>${n.toString(16).toUpperCase()}</span> = Binary <span>${n.toString(2)}</span>`;
    } catch { document.getElementById('customResult').innerHTML = '<span style="color:var(--error)">Invalid value for base ' + base + '</span>'; }
  }

  function copyField(id, btn) {
    const val = document.getElementById(id).value;
    if (!val) return;
    navigator.clipboard.writeText(val).catch(() => {});
    btn.textContent = 'copied!'; btn.classList.add('copied');
    setTimeout(() => { btn.textContent = 'copy'; btn.classList.remove('copied'); }, 2000);
  }