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

[hiekamara1]

Tell us what’s happening:

Hey Guy,

Can someone please help me with a hint on my Project. I am done the HTML and CSS. Now I am working on the JavaScript function but, I need some help to complete my project (Roman Numeral Converter). The attached codes are what I setup but, they are not running.

Your help will highly be appreciated!

Your code so far

//Getting Elements from our html folder

const inputNumber = document.getElementById("number");
const convertBtn = document.getElementById("convert-btn");
const resultToOutput = document.getElementById("output");

//Establishing the numeral converter function

const romanNumeralConvert = () =>{

  const arabic =getElementById("arabicnumeral").value;
  const roman ="";

  const arabicArr =[ 1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1];
  const romanArr = [M, CM, D, CD, C, XC, L, XL, X, IX, V, IV, I];

if(/^(0|[1-9]\d*)$/.test(arabic)){
  if(arabic = 0){
    output.innerHTML = "Nulla";
  }else if(arabic != 0){
    for(let i = 0; i < arabicArr.length; i++){
      while(arabicArr[i] <= arabic){
        roman += romanArr[i];
        arabic -= arabicArr[i];
      }
    }
  }
}

};

// button function for discharging order
const convertBtn = (number) =>{
  if(number.value === ""){
 output.textContent("Please enter a valid number");
}else if(number.value === "-1"){
 output.textContent("Please enter a number greater than or equal to 1")
}
};

convertBtn.addEventListener("click",convertBtn);

Your browser information:

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

Challenge Information:

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

freeCodeCamp.org

[ILM]

@hiekamara1

const romanArr = [M, CM, D, CD, C, XC, L, XL, X, IX, V, IV, I];

first think I see, these needs to be strings

[lasjorg]

You are using assignment operators when you should be using equality operators.

if(araNumeral = 0)

if(inputNumber.value ="")

[jwilkins.oboe]

Hi @hiekamara1 !

@hiekamara1

the remaining tests are not running. can you please review my newest code and help me with some hints.

It would be better to focus on one thing at a time instead of trying to tackle everything at once.

Start with one failing test and debug on why it is not working.

Then, if you need help ask the forum about that specific test.

Then once you figure out that test, move onto the next test.

Learning how to be specific when asking for help is a skill required for the job.

If you were on a job struggling with an assignment and asked a senior “What’s wrong with my code?”, they would immediately respond with “What error messages are you getting? What are the specifics?”

This is an important skill you want to learn now so you can be prepared for the job.

Start with the first failing test and go from there.

Hope that helps

[hiekamara1]

Thanks for the clarification. Much appreciate

[lasjorg]

The romNumConvt function is never called anywhere in your code.

[lasjorg]

• The requirement says your input should have an id of number but you are using a different id in the JS. You also changed the variable names of your selected elements from the other code you posted. If you change the selector code post it again.

• araNumeral and romaNumeral are declared using const you can’t reassign them new values.

• Are you sure you want this condition else if (araNumeral <= 0)

• romNum is not the variable you used for concatenating.

• You are missing a value in one of the arrays.

• Your code and text for the “the number 4000 or greater” is wrong. I would also suggest you put it with the other validation code in that function.

---

Name your handler function properly. Yes, naming is hard but so is reading code and you are just making it harder than it has to be. Make the name specific or generic but use a name that makes sense (handleButtonClick, getUserInput, whatever).

[lasjorg]

Either you misunderstood their code or you need to stop listening to them.

A variable declared using const can not be reassigned or redeclared. It is “const” as in “constant”.

const romaNum = "";
romaNum += "test";
// Uncaught TypeError: Assignment to constant variable.

You can mutate it if it isn’t a primitive.

const romaNum = []; 
romaNum[0] = 'test'
['test']

Do not copy code you do not understand. You have errors you should be able to debug if you understand the code.

---

This is the number input HTML element

const number = document.getElementById("number");

I don’t know what this is, but it isn’t using the required id.

document.getElementById("ara-numeral").value;

---

See an issue here?

const romanNumerals = ["M", "CM", "D", "CD", "C", "XC", "L", "XL", "X", "IX", "V", "IV", "I"];
const arabicNumArr = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 5, 4, 1];

romanNumerals.length
13

arabicNumArr.length
12

---

You are still doing this, that is not an equality operator

if(araNumeral = 0)

---

Nope, they are both const variables, you can’t do this.

romaNum  += romanNumerals[i];
araNumeral -= arabicNumArr[i];

romanNumerals is an array of strings, so what is happening here?

output.textContent = romanNumerals;

---

I’m sure there is more.

I would highly suggest you go back and redo more of the curriculum again. I might suggest you go through the old JS curriculum as well.

[hiekamara1]

Hey Las,
Thanks once again. I actually did not copy the code. I used the same format and build my own code from it but, I take your recommendation into consideration. I will review the Old JS curriculum and get an understanding on declaring a variable. I have also got rid of the code as well. I will do more research on roman numerals conversion as well. I stated it in my post yesterday 24. 03.2024 that I past the test but, the converter was only converting specify numbers. I was not satisfied with it and that was the reason I reconstructed the previous codes. Thanks for your time and kind explanation. Much appreciated

[hiekamara1]

Good Evening guys,
I have been busy for the last few weeks on " Legacy JavaScript Algorithms and Data Structures" and this recommendation was really helpful . @lasjorg Thanks for the recommendation. I covered a lot of open holes I had on my way.

I am back at the roman numerals converter and I have built a working function, which I have tested and it working perfectly but, I am having problem passing some of my test options. I called the "convetInt() " In the “checkButton()” is also not responding . I also established an else if to check if number.value >= 4000. It’s working in the converter app but, the test option keep failing.

Can someone please review this code and point out a hint for me.

function convertInt(val){
  //Assigning Arabic numerals to the corresponding Roman numerals values
var romanNumerals ={
  M: 100n the for of loo0,
  CM: 900,
  D: 500,
  CD: 400,
  C: 100,
  XC: 90,
  L: 50,
  XL: 40,
  X: 10,
  IX: 9, 
  V: 5,
  IV: 4,
  I: 1
};

let kam = "";

  //establishing the conversion rules using "for...of" loop

for(let x of Object.keys(romanNumerals)){
  let ek = Math.floor(val/romanNumerals[x]);
  val -= ek * romanNumerals[x];
  kam += x.repeat(ek);
}
return kam;
};

console.log(convertInt(77))

//Alert Messages
function checkButton(){
  if(number.value === ""){
    output.innerHTML = "Please enter a valid number";
  }else if(number.value <= -1){
    output.innerHTML = "Please enter a number greater than or equal to 1";
  }else if(number.value >= 4000){
    output.innerHTML = "Pleaese enter a number less than or equal to 3999";
  }else{
    output.innerHTML = convertInt();
  }
  return output.innerHTML
};

console.log(checkButton(77))

// Event Listener Button

convertBtn.addEventListener("click", checkButton );

[ILM]

remember that number.value is a string, as such it can have weird behaviour, maybe convert it… ?

[lasjorg]

• Where are your element selector code? Do not rely on elements with ids to be globally available. Also, hyphenated id values do not become available as camel case identifiers. As a result, your button does not have an event listener on it.

• You have a console log where you call checkButton with an argument, but that function does not have a parameter.

• Your convertInt function has a val parameter, but is not called with an argument inside checkButton.

• You have junk in front of the 100 value in your object M: 100n the for of loo0

• Are you sure your code is passing the tests in the old curriculum? Post the code you passed with. For example, 600 is DC not MMMMMM which is what your code returns.

[hiekamara1]

In the above screenshots as you can see, are the elements selector , follow by the convertInt (). I also log 600 in the console and the output results is on the right side of the screenshot . The parameter “val”, is called with in the for of loop and it also have a value assigned to it as well.

[lasjorg]

If they are in your code, why didn’t you post all of it?

I had to remove the junk you had in front of the M value and in doing, so I didn’t replace it with 1000 so it became 100. I can’t say I was really paying attention, but I’m also not going to fix code by adding to it, only removing things that obviously shouldn’t be in it. So it became M: 100 and not M: 1000

---

You have a typo in your text "Pleaese enter a number less than or equal to 3999"

You call convertInt without an argument, so val is undefined inside the function.

output.innerHTML = convertInt();

You have to pass it the value you get from the input element.

[hiekamara1]

Hello Las,

This is my full code . I also verified the typo in the text and add the argument to convertInt . I runed the test and some of the tested questions keep failing. Attached is screenshot of the failing test questions

//Declaring and inputing html element selector

const numB = document.getElementById("number");
const convertBtn = document.getElementById("convert-btn");
const outputField = document.getElementById("output");

// function to convert Arabic numerals to Roman numerals

function convertInt(val){
  //Assigning Arabic numerals to the corresponding Roman numerals values
var romanNumerals ={
  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
};

let kam = "";

  //establishing the conversion rules using "for...of" loop

for(let x of Object.keys(romanNumerals)){
  let ek = Math.floor(val/romanNumerals[x]);
  val -= ek * romanNumerals[x];
  kam += x.repeat(ek);
}
return kam;
};

console.log(convertInt(600))

//Alert Messages
function checkButton(){
  if(number.value === ""){
    output.innerHTML = "Please enter a valid number";
  }else if(number.value <= -1){
    output.innerHTML = "Please enter a number greater than or equal to 1";
  }else if(number.value >= 4000){
    output.innerHTML = "Please enter a number less than or equal to 3999";
  }else{
    output.innerHTML = convertInt(val);
  }
  return output.innerHTML
};

console.log(checkButton(77))

// Event Listener Button

convertBtn.addEventListener("click", checkButton );

[lasjorg]

output.innerHTML = convertInt(val);

val is nothing inside the checkButton function. It isn’t declared inside that function or at an outer scope, nor is it passed into the function. Accessing val inside the checkButton function is just a reference error.

You should pass the same value to convertInt when you call it as then one you checked in the previous if statements.

---

After you pass this challenge, I would take a little time to better understand parameters, arguments, and variable scope.

It is very hard to code something if you do not understand where the data lives, how to access it, or pass it around.

[hiekamara1]

In the above function I created, convertInt is a separate function that accept Integer or positive value and convert it to the corresponding roman Numerals equivalence. Val in the convertInt is represent the unknow figure (integer values) to be enter by the user. I also created the button function 'checkButton ’ and called convertInt if all of the above check in checkButton are met.

You said in your last reply: " You should pass the same value to convertInt when you call it as then one you checked in the previous if statements." I don’t understand what you mean. can you please break it down for my level understanding

Las I am new to coding and I am reading and writing codes everyday to catchup with time and filled out some space along the way. I know I need to increase my knowledge about parameters, arguments and variable scope and the many others ahead of me, and you are right.

[lasjorg]

You need to pass the user input to the function call, that is it. In your case, that would be number.value

output.innerHTML = someFn(useInput)

Considering you are already logging convertInt where you pass it an argument, it should come as no surprise that it needs an argument so that the val parameter will have a value.

[hiekamara1]

Good Evening Las,
Thanks so much again man. I am indeed once again grateful for your hint. The test questions successfully pass and a great lessons have also been learn from this test as well. I passed in the user input as you pointed out and it went through successfully . All thanks to you and your fellow Staff Members .

I also take your recommendation very serious to review on the differences between parameters, arguments and variable scope. I am going to focus on this for the next few days and close some gap in my foundation from there.

Thanks once again