Build a Roman Numeral Converter Project - Build a Roman Numeral Converter

Here’s my code:

const number = document.getElementById("number");

const convertBtn = document.getElemenntById("convert-btn");

const output = document.getElementById("output");

const convertToRomanNumeral = () => {
  if (number.value === "") {
    output.innerHTML = "Please enter a valid number";
    return String(output);
  }

  if (number.value < 1) {
    output.innerHTML = "Please enter a number greater than or equal to 1";
    return String(output);
  }

  if (number.value > 3999) {
    output.innerHTML = "Please enter a number less than or equal to 3999";
  }
}

convertBtn.addEventListener("click", () => {
  convertToRomanNumeral(Number(number.value));
});

I’d like to know where I’m going wrong, because it seems like nothing shows up at the beginning.

did you try to open your console to see the error message at the very end ?

I saw, it was a misspell.

1 Like

Just fixed the misspell.

It’s working much better, just have to focus on the main algorithm.

Is recursion required for Roman numeral conversion just like it was for Binary conversion?

No, it’s not required, you can use it or implement any other solution or algorithm if it works.

While starting off, is it necessary to create an object of the essential Roman numerals. If not, then what would be a simpler way?

I tried that, but whenever I type in any number, I’m getting 0. I’d like to know why I get 0 instead of the corresponding Roman numeral.

Sure, I will help you if I could see your code.

Here it is:

const number = document.getElementById("number");

const convertBtn = document.getElementById("convert-btn");

const output = document.getElementById("output");

const convertToRomanNumeral = () => {
  if (number.value === "") {
    output.innerHTML = "Please enter a valid number";
    return String(output);
  }

  if (number.value < 1) {
    output.innerHTML = "Please enter a number greater than or equal to 1";
    return String(output);
  }

  if (number.value > 3999) {
    output.innerHTML = "Please enter a number less than or equal to 3999";
  }
  const romanNumerals = {
    1: "I",
    4: "IV",
    5: "V",
    9: "IX",
    10: "X",
    16: "XVI",
    649: "DCXLIX",
    1023: "MXXIII",
    3999: "MMMCMXCIX"
  }

  let result = "";

  for (let value in romanNumerals) {
    while (number.value >= value) {
      result += romanNumerals[value];
      number.value -= value;
    }
  }
  return result;
}

convertBtn.addEventListener("click", () => {
  convertToRomanNumeral(Number(number.value));
});

This line will change the value in your input in each iteration of your loop, which is why it ends up being 0 as you said.

Because you didn’t assign the result variable to the element output as its text.

Also, is the algorithm correct?

I don’t think so.

Try understanding how numbers are converted into roman numerals first by yourself.
And then try to apply that by your skills in JavaScript.

You can read this if you want to know how it works.

Even based on the link you gave me, I went through it and somewhat got the algorithm. The link says to continue until you reach zero. But the actual Roman numeral doesn’t come.

can you give me an example you didn’t understand or when the Roman numeral doesn’t come as you say ?

Shall I paste the algorithm code?

Here it is:

for (let value in romanNumerals) {
    while (number.value >= value) {
      result += romanNumerals[value];
      number.value -= value;
    }
    result = output.value;
  }
  return result;

If you knew how does the conversion happen, you should go through the values in romanNumerals from largest to smallest.

Your romanNumerals should have only the necessary properties for conversion as you could see in the link I sent to you.


Why would you use the first one in your while loop if you would reassign it again after the loop in the second statement to output.value ?

I did from least to greatest, but it should go from greatest to least.

1 Like

Just changed the order