Tuesday, May 03rd

Just a little Roman Numeral Converter I wrote. After doing so much repetition I am SURE I can replace most of this with a single function. Which led me to a cool programming thought: Sometimes you need to build something that works, even if it repeats itself to understand how you can create it without repeating itself. 




function convertToRoman(num) {
  var romanNumerals = [];
  //1.Turn number into string
  //2.Turn string into array
  //3.Reverse array
  var arr = num.toString().split("").reverse();

  //4. Take care of ones position
  if (arr.length >= 1) {
    if (arr[0] === "0") {
      romanNumerals.push("");
    } else if (arr[0] == 1) {
      romanNumerals.push("I");
    } else if (arr[0] == 2) {
      romanNumerals.push("II");
    } else if (arr[0] == 3) {
      romanNumerals.push("III");
    } else if (arr[0] == 4) {
      romanNumerals.push("IV");
    } else if (arr[0] == 5) {
      romanNumerals.push("V");
    } else if (arr[0] == 6) {
      romanNumerals.push("VI");
    } else if (arr[0] == 7) {
      romanNumerals.push("VII");
    } else if (arr[0] == 8) {
      romanNumerals.push("VIII");
    } else {
      romanNumerals.push("IX");
    }
  }
  //5. Take care of tens position
  if (arr.length >= 2) {
    if (arr[1] == "0") {
      romanNumerals.push("");
    } else if (arr[1] == 1) {
      romanNumerals.push("X");
    } else if (arr[1] == 2) {
      romanNumerals.push("XX");
    } else if (arr[1] == 3) {
      romanNumerals.push("XXX");
    } else if (arr[1] == 4) {
      romanNumerals.push("XL");
    } else if (arr[1] == 5) {
      romanNumerals.push("L");
    } else if (arr[1] == 6) {
      romanNumerals.push("LX");
    } else if (arr[1] == 7) {
      romanNumerals.push("LXX");
    } else if (arr[1] == 8) {
      romanNumerals.push("LXXX");
    } else {
      romanNumerals.push("XC");
    }
  }

  //6. Take care of hundreds position
  if (arr.length >= 3) {
    if (arr[2] == "0") {
      romanNumerals.push("");
    } else if (arr[2] == 1) {
      romanNumerals.push("C");
    } else if (arr[2] == 2) {
      romanNumerals.push("CC");
    } else if (arr[2] == 3) {
      romanNumerals.push("CCC");
    } else if (arr[2] == 4) {
      romanNumerals.push("CD");
    } else if (arr[2] == 5) {
      romanNumerals.push("D");
    } else if (arr[2] == 6) {
      romanNumerals.push("DC");
    } else if (arr[2] == 7) {
      romanNumerals.push("DCC");
    } else if (arr[2] == 8) {
      romanNumerals.push("DCCC");
    } else {
      romanNumerals.push("CM");
    }
  }

  //7. Take care of thousands position
  if (arr.length >= 4) {
    if (arr[3] == "0") {
      romanNumerals.push("");
    } else if (arr[3] == 1) {
      romanNumerals.push("M");
    } else if (arr[3] == 2) {
      romanNumerals.push("MM");
    } else {
      romanNumerals.push("MMM");
    }
  }

  //Put it all together and what do you get!?
  return romanNumerals.reverse().join("");
}

var input = document.getElementById("roman-convert-box");

function convert() {
  var resultBox = document.getElementById("roman-result-box");
  var value = document.getElementById("roman-convert-box").value;
  var result = convertToRoman(value);
  console.log(value);
  resultBox.textContent = "";
  resultBox.textContent = result;
}

input.addEventListener("input", convert, false);

Okay, I give in... here is an updated version using a function. It uses 76 lines of code instead of 110.


function convertToRoman(num) {
  var symbols = ["I", "V", "X", "L", "C", "D", "M"];
  var romanNumerals = [];
  //1.Turn number into string
  //2.Turn string into array
  //3.Reverse array
  var arr = num.toString().split("").reverse();

  function createNumeral(place, numeral, bigNumeral, xBigNumeral) {
    if (arr[place] === "0") {
      romanNumerals.push("");
    } else if (arr[place] == 1) {
      romanNumerals.push(numeral);
    } else if (arr[place] == 2) {
      romanNumerals.push(numeral + numeral);
    } else if (arr[place] == 3) {
      romanNumerals.push(numeral + numeral + numeral);
    } else if (arr[place] == 4) {
      romanNumerals.push(numeral + bigNumeral);
    } else if (arr[place] == 5) {
      romanNumerals.push(bigNumeral);
    } else if (arr[place] == 6) {
      romanNumerals.push(bigNumeral + numeral);
    } else if (arr[place] == 7) {
      romanNumerals.push(bigNumeral + numeral + numeral);
    } else if (arr[place] == 8) {
      romanNumerals.push(bigNumeral + numeral + numeral + numeral);
    } else {
      romanNumerals.push(numeral + xBigNumeral);
    }
  }

  //4. Take care of ones position
  if (arr.length >= 1) {
    createNumeral(0, symbols[0], symbols[1], symbols[2]);
  }

  //5. Take care of tens position
  if (arr.length >= 2) {
    createNumeral(1, symbols[2], symbols[3], symbols[4]);
  }

  //6. Take care of hundreds position
  if (arr.length >= 3) {
    createNumeral(2, symbols[4], symbols[5], symbols[6]);
  }

  //7. Take care of thousands position
  if (arr.length >= 4) {
    if (arr[3] == "0") {
      romanNumerals.push("");
    } else if (arr[3] == 1) {
      romanNumerals.push("M");
    } else if (arr[3] == 2) {
      romanNumerals.push("MM");
    } else {
      romanNumerals.push("MMM");
    }
  }

  //Put it all together and what do you get!?
  return romanNumerals.reverse().join("");
}

var input = document.getElementById("roman-convert-box");

function convert() {
  var resultBox = document.getElementById("roman-result-box");
  var value = document.getElementById("roman-convert-box").value;
  var result = convertToRoman(value);
  console.log(value);
  resultBox.textContent = "";
  resultBox.textContent = result;
}

input.addEventListener("input", convert, false);
Subscribe

Subscribe