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

JavaScript
1

Tell us what’s happening:

I’ve written the following code for this test, but it seems to be modified in the background and it’s not running. It says TypeError: _letters is undefined, but there’s no _letters variable, and I’ve tried creating a _letters dummy variable, but then it says _letters2 is undefined. I’ve checked the code and it doesn’t seem to be a bug from my side, is there any way to bypass it?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Roman Number Converter</title>
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <main>
    <form>
      <input id="number" type="number" placeholder="Enter a number" min="0" max="4000" />
      <button id="convert-btn" type="submit">Convert to Roman</button>
    </form>
    <p id="output"></p>
  </main>
  <script src="script.js"></script>
</body>

</html>

/* file: styles.css */
input {
  width: 200px;
}

/* file: script.js */
const form = document.querySelector("form");
const input = document.getElementById("number");
const output = document.getElementById("output");


const letters = [
  {letter: "M", value: 1000},
  {letter: "D", value: 500},
  {letter: "C", value: 100},
  {letter: "L", value: 50},
  {letter: "X", value: 10},
  {letter: "V", value: 5},
  {letter: "I", value: 1},
]


function decimalToRoman(number) {
  let roman = "";
  let remaining = number;
  
  for (const i in letters) {
    const { letter, value } = letters[i];

    while (remaining >= value) {
      roman += letter;
      remaining -= value;
    }

    if (i < letters.length - 1) {
      let { letter: nextLetter, value: nextValue } = letters[i + 1];

      if (remaining >= value - nextValue) {
        roman += nextLetter + letter;
        remaining -= value - nextValue;
      }
    }
  }

  return roman;
}


form.addEventListener("submit", () => {
  output.innerText = decimalToRoman(input.value);
});

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:136.0) Gecko/20100101 Firefox/136.0

Challenge Information:

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

2

The type of input.value is a string. Convert the remaining variable into a number.
input_val

The variable i in for…in loop is of type string. Convert it into a number.

In a for...in loop, the key is always a string.

When you are trying to access {value & letter} using letters[i+1] which internally converts into letters[“01”] and that is undefined. This triggered an error.
Don’t forget to use preventDefault() on form. Otherwise, it will refresh your page.

You can do like this :-
form.addEventListener(“submit”, (event) => {
event.preventDefault();
output.innerText = decimalToRoman(input.value);
});