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

JavaScript
1

Tell us what’s happening:

Everything is passing apart from instruction no.5 and the related no.10, and I cannot seem to find a reason why?

  1. When the #number element contains the number -1 and the #convert-btn element is clicked, the #output element should contain the text "Please enter a number greater than or equal to 1" .

Your code so far

<!-- file: index.html -->
<!DOCTYPE html> 
<html lang = "en"> 
  <head> 
    <meta charset = "UTF-8"> 
<link rel="stylesheet" href="styles.css">
<title>roman-numeral-converter</title> 
    </head> 
    <body>
      <input id="number"></input> <button id="convert-btn">Convert</button> <div id="output"></div> 
      <script src="script.js"></script> 
      </body> 
      </html>

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

const numeralsObj = {
    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,
};

function checkInput() {
    const numberOnly = input.value.match(/[0-9]+/g);
    if (!numberOnly || numberOnly.length === 0) {
        output.innerText = "Please enter a valid number";
        return;
    }
    const num = parseInt(numberOnly[0]);
    if (num < 1) {
        output.innerText = "Please enter a number greater than or equal to 1";
        return;
    }
    if (num > 3999) {
        output.innerText = "Please enter a number less than or equal to 3999";
        return;
    }
    const romanNumeral = accumulator(num, numeralsObj);
    output.innerText = romanNumeral;
}

function accumulator(num, numeralsObj) {
    let accumulatorString = "";
    for (const key in numeralsObj) {
        const numberValue = numeralsObj[key];
        while (numberValue <= num) {
            num -= numberValue;
            accumulatorString += key;
        }
    }
    return accumulatorString;
}

button.addEventListener("click", checkInput);


/* file: styles.css */

Your browser information:

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

Challenge Information:

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

2

To clarify, you don’t know why these tests are not passing - what is not working as intended, or don’t know which part exactly needs to be corrected?

3

I would like help understanding why only that one section is not parsing please

4

Well, I entered the -3 to the input box and clicked Convert. Instead of error, the III was displayed, so there’s something not working with part of code responsible for it.

5

yeah I noticed that but cannot see why annoyingly

6

Which code is responsible for it? Try adding some logging to console with console.log, to try to pin-point the exact place where things go awry.

7

Strangely if you enter 0 then the correct notification/text is displayed but any number with a minus in front will not, I shall investigate further

8

Hi there. You need to correct that condition.

9

I managed to make it work and pass by adding -? to my regex to account for negative values, out of curiosity what is wrong with the snippet you shared as I tried adjusting that condition but couldnt make it work.

10

Ah, sorry for the confusion. I see what you did there! Adding -? to your regex ensures that negative values are handled, which is great for validating the input properly. The issue with the condition if (num < 1) wasn’t the logic itself—it correctly checks for values less than 1—but if the input parsing didn’t properly extract or convert the number (e.g., handling negative signs or invalid inputs), num might not have been set correctly. That could explain why the condition seemed ineffective. Glad you found a solution that works!

1 Like
11

Thats OK thankyou for explaining that, there is still soooo much to take in its nice to have someone explain things a little.

1 Like