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

JavaScript
1

Tell us what’s happening:

everything works except the part that converts it. I really don’t understand what I did wrong.

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>Document</title>
  </head>
  <body>
<input id="number">
<button id="convert-btn">Convert</button>
<div id="output"></div>
<script src="./script.js"></script>
</body>
</html>

/* file: styles.css */


/* file: script.js */
const input = document.getElementById("number");
const convert = document.getElementById("convert-btn");
const output = document.getElementById("output");
const numerals = [
["M", 1000],
["CM", 900],
["D",	500],
["CD", 400],
["C",	100],
["XC", 90],
["L",	50],
["XL", 40],
["X",	10],
["IX", 9],
["V",	5],
["IV", 4],
["I",	1]
];

input.addEventListener("keydown", e => {
  if(e.key === "Enter") {
    convert.click()
  }
})

convert.addEventListener("click", () => {
  let value = input.value;
  if (!value) {
    output.innerText = "Please enter a valid number"
  } else if (value < 0) {
    output.innerText = "Please enter a number greater than or equal to 1"
  } else if (value > 3999) {
     output.innerText = "Please enter a number less than or equal to 3999"
  } else {
    let result = "";

    for (const [roman,number] of numerals) {}
    while (number < value) {
      result += roman;
      value -= number;
    }
  }
  output.innerText = result;
})

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Challenge Information:

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

2

Your logic is correct, but you have small mistakes.

This loop does nothing, I think you intended to nest the while loop inside it instead.

What if the user entered a number that is already there in your numerals array,
like the number 9? If you tried it you will see this result VIII, which isn’t correct.

That’s because you didn’t check for equality too in your condition number < value.

And the last one, a variable declared using let has block scope which means it’s only available in the block (within a pair of curly braces {}) where it is defined.

This variable is declared in the else block, so you can only access it inside the else.

But you have this line outside the else block: