Roman Numeral Converter — Arabic to Roman & Back

<div class="wrap">
  <h2>Roman Numeral Converter</h2>

  <div class="panel">
    <label>Arabic number (1-3999)</label>
    <input type="text" id="arabic-input" spellcheck="false" value="1994" inputmode="numeric" />
    <div class="arrow">converts to</div>
    <div class="roman-output" id="roman-output"></div>
  </div>

  <div class="divider"><span>or convert the other way</span></div>

  <div class="panel">
    <label>Roman numeral</label>
    <input type="text" id="roman-input" spellcheck="false" placeholder="e.g. MCMXCIV" />
    <div class="arrow">converts to</div>
    <div class="arabic-output" id="arabic-output"></div>
  </div>

  <div class="breakdown" id="breakdown"></div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; background: #f8fafc; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 28px 20px; }

.wrap { width: 100%; max-width: 420px; background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; padding: 24px; }
h2 { font-size: 17px; font-weight: 800; color: #1e293b; margin-bottom: 18px; }

.panel { margin-bottom: 6px; }
label { display: block; font-size: 11.5px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; }
input { width: 100%; padding: 12px 14px; border: 1.5px solid #e2e8f0; border-radius: 10px; font-family: "SF Mono", Consolas, monospace; font-size: 16px; color: #1e293b; }
input:focus { outline: none; border-color: #6366f1; }
input.invalid { border-color: #dc2626; }

.arrow { text-align: center; font-size: 10.5px; color: #cbd5e1; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin: 8px 0; }

.roman-output, .arabic-output { text-align: center; font-size: 26px; font-weight: 800; color: #4338ca; min-height: 34px; letter-spacing: 0.04em; }
.arabic-output { color: #16a34a; }
.error-text { font-size: 13px; color: #dc2626; font-weight: 600; }

.divider { display: flex; align-items: center; gap: 10px; margin: 20px 0 16px; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: #e2e8f0; }
.divider span { font-size: 11px; color: #94a3b8; font-weight: 600; white-space: nowrap; }

.breakdown { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; min-height: 20px; }
.chip { font-size: 11px; font-family: "SF Mono", Consolas, monospace; padding: 4px 8px; border-radius: 6px; background: #f1f5f9; color: #475569; font-weight: 700; }

const ROMAN_TABLE = [
  [1000, 'M'], [900, 'CM'], [500, 'D'], [400, 'CD'],
  [100, 'C'], [90, 'XC'], [50, 'L'], [40, 'XL'],
  [10, 'X'], [9, 'IX'], [5, 'V'], [4, 'IV'], [1, 'I'],
];

const arabicInput = document.getElementById('arabic-input');
const romanOutput = document.getElementById('roman-output');
const romanInput = document.getElementById('roman-input');
const arabicOutput = document.getElementById('arabic-output');
const breakdown = document.getElementById('breakdown');

function toRoman(num) {
  if (num < 1 || num > 3999) return null;
  let result = '';
  let remaining = num;
  for (const [value, symbol] of ROMAN_TABLE) {
    while (remaining >= value) {
      result += symbol;
      remaining -= value;
    }
  }
  return result;
}

function fromRoman(str) {
  const cleaned = str.trim().toUpperCase();
  if (!cleaned) return { error: null };
  if (!/^[MDCLXVI]+$/.test(cleaned)) return { error: 'Only the letters M, D, C, L, X, V, I are valid' };

  const values = { M: 1000, D: 500, C: 100, L: 50, X: 10, V: 5, I: 1 };
  let total = 0;
  let prev = 0;
  const parts = [];
  for (let i = cleaned.length - 1; i >= 0; i--) {
    const value = values[cleaned[i]];
    if (value < prev) {
      total -= value;
      parts.unshift('-' + value);
    } else {
      total += value;
      parts.unshift('+' + value);
      prev = value;
    }
  }

  const roundTrip = toRoman(total);
  if (roundTrip !== cleaned) {
    return { error: 'Not a valid standard-form Roman numeral (unusual letter ordering)' };
  }

  return { value: total, parts };
}

function updateFromArabic() {
  const raw = arabicInput.value.trim();
  arabicInput.classList.remove('invalid');
  if (!raw) { romanOutput.innerHTML = ''; return; }

  const num = parseInt(raw, 10);
  if (!/^\d+$/.test(raw) || Number.isNaN(num)) {
    arabicInput.classList.add('invalid');
    romanOutput.innerHTML = '<span class="error-text">Enter a whole number</span>';
    return;
  }
  const roman = toRoman(num);
  if (!roman) {
    arabicInput.classList.add('invalid');
    romanOutput.innerHTML = '<span class="error-text">Must be between 1 and 3999</span>';
    return;
  }
  romanOutput.textContent = roman;
}

function updateFromRoman() {
  const raw = romanInput.value;
  romanInput.classList.remove('invalid');
  breakdown.innerHTML = '';
  if (!raw.trim()) { arabicOutput.innerHTML = ''; return; }

  const result = fromRoman(raw);
  if (result.error) {
    romanInput.classList.add('invalid');
    arabicOutput.innerHTML = '<span class="error-text">' + result.error + '</span>';
    return;
  }
  arabicOutput.textContent = result.value;
  breakdown.innerHTML = result.parts.map(p => '<span class="chip">' + p + '</span>').join('');
}

arabicInput.addEventListener('input', updateFromArabic);
romanInput.addEventListener('input', updateFromRoman);

updateFromArabic();