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

JavaScript
1

Tell us what’s happening:

I wrote my program on my local machine and it works fine. I put it online and run the test but the points 5, 6, 12 and 13 didn’t pass. point 4 did pass well. I checked for typos, changed greater than in greater than or equal to or visa-versa, stript all my comments and all the code that I add to make it a little nicer but I can’t find why my code doesn’t 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>Roman Numeral Converter</title>
    
    <link rel="stylesheet" href="styles.css" />

</head>
<body>
    <div id="container">
        <img src="https://www.boermastreek.nl/han/freecodecamp/photos/hansConverter.png" alt="Hans converter logo" />
    <h1>Roman numeral converter</h1>
    <form id="form">
    <h2>Add your number to convert</h2>
    <input id="number" type="number" placeholder="Type here your number"></input>
    </form>
    <button id="convert-btn">Convert</button>
    <div id="output"></div><br>
    </div>
    <script src="script.js"></script>
</body>
</html>

/* file: styles.css */
body {
    background-color: black;
}

#container {
    display:flex;
    flex-direction: column;
    width: 500px;
    align-items: center;
    background-color: yellow;
    margin: 20px auto;
}

#form {
    border: 5px solid black;
}

h2 {
   text-align: center; 
}

#number{
    width: 400px;
    height: 30px;
    margin: 20px;
    font-size: 20px;
    text-align: center;
    background-color: black;
    color: white;
}

::placeholder {
  color: yellow;
}

#convert-btn {
    width: 400px;
    height: 30px;
    margin: 20px;
    font-size: 20px;
    background-color: black;
    color: yellow;
}

#output {
    width: 400px;
    height: 40px;
    margin: 10px 20px;
    font-size: 30px;
    text-align: center;
}

/*Media*/
@media screen and (max-width: 800px){
 #container {
    width: 500px;
    margin:auto;
 }
 body {
    background-color: yellow;
    min-width: 500px;
 }    
}

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


convertBtn.addEventListener("click", () => {
    if (!number.value) {
      output.innerText = "Please enter a valid number";
      return; 
    }
    if (number.value < 1) {
      output.innerText = "Please enter a number greater then or equal to 1";
      return;
    }
    if (number.value >= 4000) {
      output.innerText = "Please enter a number less then or equal to 3999";
      return; 
    }
    
    const outputConvertedRomanNumber = convertInputToRomanNumber(number.value);
    
    output.innerText = outputConvertedRomanNumber;
})

const convertInputToRomanNumber = (numberToConvert) => {
    const romanNumerals = ["M", "CM", "D", "CD", "C", "XC", "L", "XL", "X", "IX", "V", "IV", "I"];
    const arabicNumerals = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1];
    let romanNumber = "";
    let indexNumber = 0;
    while (numberToConvert > 0) {
        const numberOfSymbols = Math.floor(numberToConvert / arabicNumerals[indexNumber]);
        numberToConvert -= numberOfSymbols * arabicNumerals[indexNumber];
        romanNumber += romanNumerals[indexNumber].repeat(numberOfSymbols);
        indexNumber++;
    };
    return romanNumber;

}

Your browser information:

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

Challenge Information:

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

2

There is a typo in the word then in your code.

3 Likes
3

Hi there!

Following the above post, before using the input.value you need to convert it to a number, using JavaScript perseInt() or Number() method.

1 Like
4

Thank You. In this case it wasn’t necassary to convert it to a number because the output is string. The typo was the bad code that was no problem on my local machine.

5

I knew it but couldn’t find it. Hard language :slight_smile:

6

It passed without the conversion but it seems that it was necessary to convert the number. I changed it anyway.

1 Like
7

That’s because JavaScript automatically converts strings to numbers when comparing them to another number:

if("583" > 500) {
 console.log("TRUE");
} 
// OUTPUT: TRUE

In another case where you take the user input and add 5 to it:

let input = document.getElementById("userAge").value; // Assume this is "35"
console.log(input + 5);    // OUTPUT: 355

That’s because you are doing "35" + 5 and JavaScript will treat it as string concatenation.
The value property will return the value of an element as a string.

To make it work correctly, you should convert it to a number as @hasanzaib1389 mentioned.

let input = document.getElementById("userAge").value;   // "35"
console.log(Number(input) + 5);    // OUTPUT: 40
3 Likes
8

Thank you, that gives me a better understanding. I used that way of concatination to build the Roman numbers. It’s clear that that is a string.

1 Like
9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.