<div>
  <label for="input" class="input-label">Input:</label>
  <input id="input" type="number" placeholder="Enter a number between 1 and 3999" rows="5" />
  <label for="output" class="output-label">Output:</label>
  <pre id="output"></pre>
</div>
* {
  margin: 0;
  box-sizing: border-box;
}
div {
  border: 3px solid grey;
  margin: auto;
  padding: 2rem 1rem;
  background-color: #29282e;
  border-radius: 0.3rem;
}
pre {
  display: block;
  position: relative;
  top: 1rem;
  color: #97c389;
  overflow: auto;
  line-height: 1.5rem;
  background-color: #1b2b34;
  padding: 0.5rem;
  border: 2px solid #324149;
}
label {
  color: #fff;
  font-family: consolas;
  display: block;
}
.input-label {
  margin-bottom: 0.5rem;
}
.output-label {
  margin-top: 0.5rem;
}
input {
  width: 100%;
  padding: 0.5rem;
}

// function that converts decimal numbers to roman numerals.

function convertToRoman(num) {
  const romanNums = {
    1: "I",
    2: "II",
    3: "III",
    4: "IV",
    5: "V",
    6: "VI",
    7: "VII",
    8: "VIII",
    9: "IX",
    10: "X",
    20: "XX",
    30: "XXX",
    40: "XL",
    50: "L",
    60: "LX",
    70: "LXX",
    80: "LXXX",
    90: "XC",
    100: "C",
    200: "CC",
    300: "CCC",
    400: "CD",
    500: "D",
    600: "DC",
    700: "DCC",
    800: "DCCC",
    900: "CM",
    1000: "M",
    2000: "MM",
    3000: "MMM"
  };
  let romanStr = "";
  const numStr = num.toString();
  const numLength = numStr.length;
  let pow = numLength - 1;
  const arr = [];
  for (let i = 0; i < numStr.length; i++) {
    arr.push(parseInt(numStr[i]) * 10 ** pow);
    pow--;
  }
  arr.map((num) => {
    if (num > 0) {
      romanStr += romanNums[num];
    }
  });
  if (num > 3999 || num < 1) {
    return "Error: Enter a number between 1-3999!";
  } else {
    return romanStr;
  }
}

// output
const input = document.getElementById("input");
const output = document.getElementById("output");
input.addEventListener("input", () => {
  if (!input.value) {
    output.textContent = "";
  } else {
    output.textContent = "> " + convertToRoman(input.value);
  }
});

//tests
// console.log(convertToRoman(4000));
// console.log(convertToRoman(2), "=> II");
// console.log(convertToRoman(3), "=> III");
// console.log(convertToRoman(4), "=> IV");
// console.log(convertToRoman(5), "=> V");
// console.log(convertToRoman(9), "=> IX");
// console.log(convertToRoman(12), "=> XII");
// console.log(convertToRoman(16), "=> XVI");
// console.log(convertToRoman(29), "=> XXIX");
// console.log(convertToRoman(44), "=> XLIV");
// console.log(convertToRoman(45), "=> XLV");
// console.log(convertToRoman(68), "=> LXVIII");
// console.log(convertToRoman(83), "=> LXXXIII");
// console.log(convertToRoman(97), "=> XCVII");
// console.log(convertToRoman(99), "=> XCIX");
// console.log(convertToRoman(400), "=> CD");
// console.log(convertToRoman(500), "=> D");
// console.log(convertToRoman(501), "=> DI");
// console.log(convertToRoman(649), "=> DCXLIX");
// console.log(convertToRoman(798), "=> DCCXCVIII");
// console.log(convertToRoman(891), "=> DCCCXCI");
// console.log(convertToRoman(1000), "=> M");
// console.log(convertToRoman(1004), "=> MIV");
// console.log(convertToRoman(1006), "=> MVI");
// console.log(convertToRoman(1023), "=> MXXIII");
// console.log(convertToRoman(2014), "=> MMXIV");
// console.log(convertToRoman(3999), "=> MMMCMXCIX");
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.