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

Tell us what’s happening:

My code is functional and operates. The code doesn’t check off the requirments but I believe everything is functional. Why doesn’t it pass?

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>Decimal to Roman Numeral Converter</title>
</head>
<body>

  <input type="number" id="number" placeholder="Enter a number">
  <button id="convert-btn">Convert to Binary</button>
  <p id="output"></p>

  <script src="script.js"></script>

</body>
</html>

/* file: script.js */
const convertBtn = document.getElementById("convert-btn");
const output = document.getElementById("output");

const convert = () => {
  const romanNumerals = [
    { arabic: 1000, roman: 'M' },
    { arabic: 900, roman: 'CM' },
    { arabic: 500, roman: 'D' },
    { arabic: 400, roman: 'CD' },
    { arabic: 100, roman: 'C' },
    { arabic: 90, roman: 'XC' },
    { arabic: 50, roman: 'L' },
    { arabic: 40, roman: 'XL' },
    { arabic: 10, roman: 'X' },
    { arabic: 9, roman: 'IX' },
    { arabic: 5, roman: 'V' },
    { arabic: 4, roman: 'IV' },
    { arabic: 1, roman: 'I' }
  ];

  let numberInput = document.getElementById("number").value;
  let numberValue = Number(numberInput); 

  if (isNaN(numberValue) || numberInput === "") {
    output.textContent = "Please enter a valid number";
    return;
  } else if (numberValue < 1) {
    output.textContent = "Please enter a number greater than or equal to 1";
  } else if (numberValue > 3999) {
    output.textContent = "Please enter a number less than or equal to 3999";
  } else {
    let romanNumeral = '';
    romanNumerals.forEach(({ arabic, roman }) => {
      while (numberValue >= arabic) {
        romanNumeral += roman;
        numberValue -= arabic;
      }
    });
    output.textContent = `Roman numeral: ${romanNumeral}`;
  }
};

convertBtn.addEventListener("click", convert);
/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36

Challenge Information:

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

Let’s take a look.

The first failing test is:

  1. When the #number element contains the number 9 and the #convert-btn element is clicked, the #output element should contain the text "IX" .

Looking at your app, it appears:

<p id="output">Roman numeral: IX</p>

I guess that the test may not like the “Roman numeral:” part