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

JavaScript
1

Test not passing but Preview window shows that the code works???

Like I mentioned in the title, I made the Roman number convertor and it works, it works on my live extension in VScode, it works on freeCC preview window but for some reason all test involving checking the number are failing, EVEN THOU I AM SEEING IS WORKING. I tried checking the typeof and it is a string, I don’t think is because I used ES8 and ES6, so please help. I now there are better approaches, I already have another one that passes all the test, but I want to know what is wrong with this one :slight_smile: . Thank you.

Your code so far

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    
</head>
<body>
    
    <input type="number" id="number" required>
    <button type="button" id="convert-btn">CONVER</button>
    <div id="output"></div>

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

let input = document.getElementById("number");
let button = document.getElementById("convert-btn");
let output = document.getElementById("output");


button.addEventListener("click", () => {
    let num = parseInt(input.value, 10);

    if(isNaN(num)){
        return output.textContent = "Please enter a valid number";
    } else if(num < 0){
        return output.textContent = "Please enter a number greater than or equal to 1";
    } else if(num >= 4000) {
        return output.textContent = "Please enter a number less than or equal to 3999";
    }

    let numString = num.toString().padStart(4,'0');
    numString = numString.split("");
    let romanNum = [];
    

singlesConverter(numString)
    .then(() => {
        return tensConverter(numString);
    })
    .then(() => {
        return hundredsConverter(numString);
    })
    .then(() => {
        thousandsConverter(numString);
    });

function singlesConverter(arr){
    return new Promise((resolve, reject) => {
        let num = arr[3];
        let letterSingles;
        switch(num){
            case 0:
                letterSingles = "";
                break;
            case '1':
                letterSingles = 'I';
                break;
            case '2':
                letterSingles = 'II';
                break;
            case '3':
                letterSingles = 'III';
                break;
            case '4':
                letterSingles = 'IV';
                break;
            case '5':
                letterSingles = 'V';
                break;
            case '6':
                letterSingles = 'VI';
                break;
            case '7':
                letterSingles = 'VII';
                break;
            case '8':
                letterSingles = 'VIII';
                break;
            case '9':
                letterSingles = 'IX';
                break;
            }
        romanNum.push(letterSingles)
        resolve();
    });
}

function tensConverter(arr){
    return new Promise((resolve, reject) => {
        let num = arr[2];
        let letterTens;
        switch(num){
            case 0:
                letterTens = "";
                break;
            case '1':
                letterTens = 'X';
                break;
            case '2':
                letterTens = 'XX';
                break;
            case '3':
                letterTens = 'XXX';
                break;
            case '4':
                letterTens = 'XL';
                break;
            case '5':
                letterTens = 'L';
                break;
            case '6':
                letterTens = 'LX';
                break;
            case '7':
                letterTens = 'LXX';
                break;
            case '8':
                letterTens = 'LXXX';
                break;
            case '9':
                letterTens = 'XC';
                break;
            }
            romanNum.push(letterTens)
            resolve();
    });
}

function hundredsConverter(arr){
    return new Promise((resolve, reject) => {
        let num = arr[1];
        let letterHundreds;
        switch(num){
            case 0:
                letterHundreds = "";
                break;
            case '1':
                letterHundreds = 'C';
                break;
            case '2':
                letterHundreds = 'CC';
                break;
            case '3':
                letterHundreds = 'CCC';
                break;
            case '4':
                letterHundreds = 'CD';
                break;
            case '5':
                letterHundreds = 'D';
                break;
            case '6':
                letterHundreds = 'DC';
                break;
            case '7':
                letterHundreds = 'DCC';
                break;
            case '8':
                letterHundreds = 'DCCC';
                break;
            case '9':
                letterHundreds = 'CM';
                break;
            }
            romanNum.push(letterHundreds)
            resolve();
    });
}

function thousandsConverter(arr){
    return new Promise((resolve, reject) => {
        let num = arr[0];
        let letterThousands;
        switch(num){
            case "1":
                letterThousands = 'M';
                break;
            case "2":
                letterThousands = 'MM';
                break;
            case "3":
                letterThousands = 'MMM';
                break;
            case "0":
                letterThousands = "";
                break;
            }
            romanNum.push(letterThousands);
            romanNum.reverse();
            romanNum = romanNum.join("");
            romanNum = String(romanNum);
            output.textContent = romanNum;
            resolve ()
        });
    }
});

Your browser information:

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

Challenge Information:

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

2

Can you let us know what tests are failing?

3

Yes!!

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

  • Failed:When the #number element contains the number 16 and the #convert-btn element is clicked, the #output element should contain the text XVI.

  • Failed:When the #number element contains the number 649 and the #convert-btn element is clicked, the #output element should contain the text DCXLIX.

  • Failed:When the #number element contains the number 1023 and the #convert-btn element is clicked, the #output element should contain the text MXXIII.

  • Failed:When the #number element contains the number 3999 and the #convert-btn element is clicked, the #output element should contain the text MMMCMXCIX.

Basically all the tests that test the actual converter. But like I’m saying, for example with number 3999 here in the picture, you can clearly see that it worked. Same with all the rest of the numbers:

Screenshot 2024-01-22 at 3.45.19 p.m.
Screenshot 2024-01-22 at 3.45.19 p.m.1705×731 186 KB

4

It is your use of Promises. I also do not really see the point of that. If you remove the promises and just call the functions it passes the tests.

Using Promises is not free and should not be used unnecessarily. If you want to use chaining, use methods instead.

Having said that, I also do not know exactly what about the tests are making them fail with them. But the test doesn’t wait it immediately checks the output and the promises might just be slow enough to where that matters.

1 Like
5

Yes!! I had another idea using math floor

document.getElementById("convert-btn").addEventListener("click", () => {
    const input = document.getElementById("number")
    const output = document.getElementById("output");
    const num = parseInt(input.value, 10);

    if(isNaN(num) || num <= 0 || num >= 4000) {
        output.textContent = "Please enter a valid number"
    } else {
        output.textContent = convertToRoman(num)
    }

    function convertToRoman(num) {
        const romanNumerals = [
            ["", "I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX"],
            ["", "X", "XX", "XXX", "XL", "L", "LX", "LXX", "LXXX", "XC"],
            ["", "C", "CC", "CCC", "CD", "D", "DC", "DCC", "DCCC", "CM"],
            ["", "M", "MM", "MMM"]
        ];

        const thousands = Math.floor(num / 1000);
        const hundreds = Math.floor((num % 1000) / 100);
        const tens = Math.floor((num % 100) / 10);
        const singles = num % 10;

        return romanNumerals[3][thousands] + romanNumerals[2][hundreds] + romanNumerals[1][tens] + romanNumerals[0][singles];
    }
})

I struggled a little figurring out the indexing of the return statement and the nested array, but the idea were always the Math.floor(), I just made this code using Promises first and I was really tormented on the why it didn’t worked. I thought it was the Promises too, but asking didn’t hurt. Thank you!!

6

That looks nicer, you just need to fix the error message code.

I might suggest an object of arrays so you can name the keys instead of using indexes.

Another option for this is an object or Map with key/value pairs. But that usually involves a loop.

7

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