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

Tell us what’s happening:

the code looks working fine but it doesnt return roman numerals what could be the problem?

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>Your Title Here</title>
    <link rel="stylesheet" href="./styles.css">
</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 convert = document.getElementById("convert-btn");
const input = document.getElementById("number");
const output = document.getElementById("output");

const numeral = [
  ["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 (value >= number){
        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/125.0.0.0 Safari/537.36

Challenge Information:

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

If you take a look at the console while running tests, there’s displayed error:

Uncaught ReferenceError: numerals is not defined

SO any alternative to that?

it was actually numeral not numerals… but thanks for spotting

That depends. If you want to use numerals variable, it needs to be defined somewhere. If you don’t want to use numerals variable, it needs to be changed to some other declared variable.

1 Like