Build a Roman Numeral Converter

JavaScript
1

Screenshot 2024-07-26 151725
Screenshot 2024-07-26 1517251343×454 51.6 KB

Screenshot 2024-07-26 151749
Screenshot 2024-07-26 151749553×523 16 KB

const form = document.getElementById("form");
const number = document.getElementById("number");
const button = document.getElementById("convert-btn");
const outputEl = document.getElementById("output");
const output = {
    id:"",
    msg:""
};
const conversion = [
    {
        roman:"M",
        arabic:1000
    },
    {
        roman:"CM",
        arabic:900
    },
    {
        roman:"D",
        arabic:500
    },
    {
        roman:"CD",
        arabic:400
    },
    {
        roman:"C",
        arabic:100
    },
    {
        roman:"XC",
        arabic:90
    },
    {
        roman:"L",
        arabic:50
    },{
        roman:"XL",
        arabic:40
    },
    {
        roman:"X",
        arabic:10
    },
    {
        roman:"IX",
        arabic:9
    },
    {
        roman:"V",
        arabic:5
    },
    {
        roman:"IV",
        arabic:4
    },
    {
        roman:"I",
        arabic:1
    }
];

function screenOutput(){
    if(output.id==="error"){
        outputEl.classList.add("error");
        outputEl.classList.remove("output");
    }
    if(output.id==="output"){
        outputEl.classList.add("output");
        outputEl.classList.remove("error");
    }
    outputEl.textContent = output.msg;
    outputEl.classList.remove("hidden");
}

const toRoman = (num, i = 0) => {
    // Base case: if num is 0, return an empty string
    if (num === 0) {
        return "";
    }

    // Recursive case
    if (num >= conversion[i].arabic) {
        // Subtract the Arabic value and concatenate the Roman numeral
        return conversion[i].roman + toRoman(num - conversion[i].arabic, i);
    } else {
        // Move to the next index in the conversion array
        return toRoman(num, i + 1);
    }
};
function inputCheck(){
    const value = number.value;
    const cnvrtNo = parseInt(value);
    if(value===""){
        output.id = "error";
        output.msg = "Please enter a valid input";
    }else if(value.includes("e")){
        output.id = "error";
        output.msg = "Please enter a valid input";
    }
    else if(number.value.includes(".")){
        output.id = "error";
        output.msg = (isNaN(cnvrtNo))?"Please enter a valid input":`Please enter a valid number between ${cnvrtNo} or ${cnvrtNo+1}`;
    }else if(cnvrtNo<1){
        output.id = "error";
        output.msg = `Please enter a number greater than or equal to 1.`;
    }else if(cnvrtNo>3999){
        output.id = "error";
        output.msg = `Please enter a number less than or equal to 3999.`;
    }else{
        output.id = "output";
        output.msg =toRoman(cnvrtNo);
    }
    screenOutput();
}



const main = () => {
    button.addEventListener("click",inputCheck);
    number.addEventListener("keydown",e=>{
        if(e.code==="Enter"){
            inputCheck();
        }
    });
    
}
main()

When I run this code in freeCodeCamp editor,1 test case didn’t pass.
But this same code showed a different output when i try to run this locally and everything looked fine.
Did I miss something?

2

When you click on the #convert-btn element without entering a value into the #number element, the #output element should contain the text "Please enter a valid number" .

Your #output element text is ‘Please enter a valid input’, which doesn’t exactly match the requirements. Fix this and your project will pass.

3

Oops and here I was going through code again and again :joy:

1 Like