JSFiddle - React, Tailwind, and code Playground

by Jacques Vincilione

HTML

<div id="output"></div>
<div id="output2"></div>

JavaScript

var outputEl = document.getElementById('output');
var output = '';
var chars = {
  ones: [
    'I', 'IV', 'V', 'IX'
  ],
  tens: [
    'X', 'XL', 'L', 'XC'
  ],
  hundreds: [
    'C', 'CD', 'D', 'CM'
  ],
  thousands: [
    'M'
  ],
};
function getDigit(num, digit) {
	if (num === 9) {
  	output += chars[digit][3];
    num = 0;
  } else if (num > 4) {
    output += chars[digit][2];
    num -= 5;
  } else if (num === 4) {
    output += chars[digit][1];
    num = 0;
  }
  if (num > 0) {
  	for (num; num > 0; num--) {
    	output += chars[digit][0];
    }
  }
}
var start;
function getRomanNumerals(number) {
    var strNum = number.toString();
    var num = parseInt(strNum[0]);
  if (strNum.length === 4) {
		getDigit(num, 'thousands');
  } else if (strNum.length === 3) {
   	getDigit(num, 'hundreds');
  } else if (strNum.length === 2) {
    getDigit(num, 'tens');
  } else if (strNum.length === 1) {
    getDigit(num, 'ones');
  }
  var newNum = strNum.split('');
  newNum.shift();
  newNum = newNum.join('');
  if (newNum.length) {
    getRomanNumerals(newNum);
  }
}
var n = 0;
//start =	performance.now();
//while(n < 10000000) {
//	output = '';
//	getRomanNumerals(317);
//  n++;
//}
//outputEl.innerHTML = 'recursive: ' + output + ' ' + (performance.now() - start) + '\n\n' ;

var romanNumerals = ["C", "XC", "L", "XL", "X", "IX", "V", "IV", "I"];
var arabicNumerals = [100, 90, 50, 40, 10, 9, 5, 4, 1];
function toRomanNumerals(arabic) {
  var result = "";
  for (var i = 0; i < romanNumerals.length; i++) {
    while (arabic >= arabicNumerals[i]) {
      result += romanNumerals[i];
      arabic -= arabicNumerals[i];
    }
  }
  return result;
}
var outputEl2 = document.getElementById('output2');
n = 0;
start =	performance.now();
while(n < 999999) {
	getRomanNumerals(317);
  n++;
}
outputEl2.innerHTML = 'dbl loops: ' + toRomanNumerals(317) + '\n' + (performance.now() - start);