The Roman numerals are no longer an essential part of our daily lives. But we do use them when designing monuments, clocks, and even for sporting events.

What are the Roman Numerals?

Roman numerals originated in ancient Rome and remained the common way of writing numbers throughout Europe for many centuries. Their use long outlived the Roman Empire itself. They were gradually replaced by the Hindu-Arabic system of numeration that we use today – the numbers zero through nine.

Roman numerals are represented by combinations of letters of the Latin alphabet, that serve as digits in this system. But unlike decimal base, with symbols 0 through 9, the the Roman system employs seven capitalized Latin letters I, V, X, L, C, D, M.

Originally, there was no single letter designation for zero. Instead, they used the Latin word Nulla, which means "none".

How do Roman Numerals work?

The Hindu-Arabic representation of these letters is as follows: I = 1, V = 5, X = 10, L = 50, C = 100, D = 500 and M = 1000.

Other numbers are formed by combining these letters per certain rules: A symbol placed after another of equal or greater value, adds its value.

For example,   VI = V + I = 5 + 1 = 6 or LX = L + X = 50 + 10 = 60. The notations VI and LX are read as "one more than five" and "ten more than fifty".

A symbol placed before one of greater values subtracts its value. For example, IX = X - I = 10 - 1 = 9, and XC = C - X = 100 - 10 = 90.

The notations IX and XC are read as "one less than ten" and "ten less than a hundred."

Numbers greater than 1,000 are formed by placing a dash over the symbol. Thus V̅ = 5,000, X̅ = 10,000, L̅ = 50,000, C̅ = 100,000, D̅ = 500,000 and M̅ = 1,000,000.

The so called "standard" form disallows using the same symbol more than three times in a row. But occasionally, exceptions can be seen. For example, IIII for number 4, VIIII for number 9, and LXXXX for 90.

An Interactive Chart of Roman Numerals and Their Combinations

Hover over each symbol to reveal its Hindu-Arabic equivalent:

I wrote the code for this interactive Roman numeral chart to embed here on freeCodeCamp News.

Given the fact that the HTML embed feature is not a full scale code editor, the given code is not structured and presented as separate HTML, CSS, and JavaScript files. Rather it is written as a single HTML file with <style> and <script> elements added for styling and functionality.

Here is the full code repository for my interactive Roman Numeral Chart.

Roman Numeral Converter

Enter a non negative integer between 0 and 5,000. Then click Convert to reveal a Roman numeral equivalent.

There is no programmatic limitation to the number 5,000 or beyond. The algorithm that governs the conversion would work all the same.

The space required to display Roman numeral equivalents of large numbers grows larger and larger without much added benefit of revealing something new.

The code itself consists of an HTML part describing the content with inline styles for ease of interaction and added JavaScript for functionality.

The is an input element of the type "number" to limit input data to numeric values and two buttons. The "Convert" button is wired to the function that performs the conversion, and the "Display" button outputs the Roman number equivalent.

Why output through a button element? Styling worked well when applied to both buttons together. And considering the limited functionality of the embed, it seemed like a time saver.

For clarity, these elements are assigned to variables:

const inputField = document.querySelector('input'); // input element
const convertButton = document.getElementById('convert'); // convert button
const outputField = document.getElementById('display'); // output element

Function convertToRoman() contains the logic and renders the result:

function convertToRoman() {
  let arabic = document.getElementById('arabicNumeral').value; // input value
  let roman = '';  // variable that will hold the result

The numerical value from input element is saved in a variable called "arabic" for further testing. The variable named "roman" will hold the string representing Roman equivalent of Arabic input.

Next, there are two arrays of equal lengths, one holding Arabic numerals and one holding their Roman counterparts. Both are in descending order to simplify subtraction:

// descending order simplifies subtraction while looping
const arabicArray = [5000, 4000, 1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1] 
const romanArray = ['V&#773;', 'MV&#773;','M', 'CM', 'D', 'CD', 'C', 'XC', 'L', 'XL', 'X', 'IX', 'V', 'IV', 'I'] 

Unicode tables help with forming symbols greater than 1,000.

Finally, here is the logic that test the inputted number and converts it.

if (/^(0|[1-9]\d*)$/.test(arabic)) {
  // Regular expression tests
  if (arabic == 0) {
    // for decimal points and negative
    outputField.innerHTML = "Nulla"; // signs
  } else if (arabic != 0) {
    for (let i = 0; i < arabicArray.length; i++) {
      while (arabicArray[i] <= arabic) {
        roman += romanArray[i];
        arabic -= arabicArray[i];
    outputField.innerHTML = roman;
} else {
  outputField.innerHTML =
    "Please enter non negative integers only. No decimal points.";

The first test checks for decimal points and negative signs. If found, the message asks to "enter non-negative integers only."

The next test checks whether the number entered equals zero. In such a case, the string "Nulla" is displayed.

Otherwise, the loops keep concatenating Roman strings while subtracting Arabic numbers until the latter satisfies the condition for the while loop. Then it displays the Roman equivalent of the user input.

Just like with the interactive chart, the code for the Roman Numeral Converter is all set for you to copy it and embed it into any article. Here's the full code repository.