Build a Roman Numeral Converter

JavaScript
1

Hey y’all I’m having trouble. It took a lot of back and forth with chatGPT to get this one. Ik i’m horrible but it did point out the less obvious defects. This code works on my codePen but won’t work on FCC. I as well can’t use my console. I know the it won’t pass all the tests but i believe I did create a successful converter. I don’t think the tests are running correctly (all)

const input = document.getElementById('number'
);
const convertBtn = document.getElementById('convert-btn'
);
const output = document.getElementById('output'
);

let arrA = [];

const toNumeral = () =>{
  output.innerHTML = "";
  
  let number = Number(input.value);
  
  if(number <= 0 || (isNaN(number)) || number >= 3999 || number == ""){
    output.innerText = "Please enter a valid number";
  return;}
  
   arrA = [];
  
  number = (Math.floor(number));
  
  while(number > 0){
    switch(true){
      case (number >= 1000):
      number -= 1000;
      arrA.push("M");
      break;
      case (number >= 900):
      number -= 900;
      arrA.push("CM");
      break;
      case (number >= 500):
      number -= 500;
      arrA.push("D");
      break;
      case (number >= 400):
      number -= 400;
      arrA.push("CD");
      break;
      case (number >= 100):
      number -= 100;
      arrA.push("C");
      break;
      case (number >= 90):
      number -= 90;
      arrA.push("XC");
      break;
      case (number >= 50):
      number -= 50;
      arrA.push("L");
      break;
      case (number >= 40):
      number -= 40;
      arrA.push("XL");
      break;
      case (number >= 9):
      number -= 9;
      arrA.push("IX");
      break;
      case (number >= 5):
      number -= 5;
      arrA.push("V");
      break;
      case (number >= 4):
      number -= 4;
      arrA.push("IV");
      break;
      case (number >= 1):
      number -= 1;
      arrA.push("I");
      break;
    
    }
    

   
  }     input.value = "";
  output.innerHTML = arrA.join("");
  return;
};

convertBtn.addEventListener('click', toNumeral);
window.addEventListener("click", alert("Hi"))```
2

Can you please provide a link to the problem

3

hi there,

the roman numeral project doesn’t have any bugs in it that I’m aware of. People (including me) have been submitting code successfully and passing the testcases in full.

In order to get help in an effective manner on the forum please consider updating your post so that:

1- you include a link to the challenge page
2- you include all the code including the html
3- your js code is well-indented and easy to read in a nice format
4- give details about the testcases that are failing
5- give details about the debugging you’ve attempted and show us the logs you’ve gathered

4

Link
HTML :

<DOCTYPE! html>
  <html lang="en">
    <head>
      <title>
        Roman Numerical Converter
        </title>
        <link rel="stylesheet" href="styles.css"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <script src="scripts.js"></script>
      </head>
      <body>
        <h1>
        Roman Numeral Converter
        </h1>
        <input required placeholder="Input Here" class="inline" id="number" type="number">
        <button class="inline" id="convert-btn" for="inputBox" type="submit">
          Convert
          </button>
          <div  style="border: solid black; background-color: grey;" class="block"
  id="output">
            
         </div>

        
        </body>
    </html>

Test Req. #9 (For example) 1. When the #number element contains the number 649 and the #convert-btn element is clicked, the #output element should contain the text "DCXLIX" <— I believe my converter should successfully handle this

5

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

6

Thank you. In codePen. My conversion for 649 gives the desired output but doesn’t check after tests are ran

7

i pasted your code into the challenge and tried to test the first failing testcase which is this one:

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 code failed to update the output element in the preview pane for me.

Have you tested this testcase?

8

ughhhhhhh. Lazily, I was going to clean up those after. BRB. But thank you very much

9

thank you again. I’ve added the If statements for these cases. `const input = document.getElementById(‘number’
);
const convertBtn = document.getElementById(‘convert-btn’
);
const output = document.getElementById(‘output’
);

let arrA = ;

const toNumeral = () =>{
output.innerHTML = “”;

let number = Number(input.value);

if(number < 0){
output.innerText = “Please enter a number greater than or equal to 1”;
return
}
else if (number >= 3999){
output.innerText = “Please enter a number less than or equal to 3999”;
return}
else if(number == “”){
output.innerText = “Please enter a valid number”;
return}

arrA = ;

number = (Math.floor(number));

while(number > 0){
switch(true){
case (number >= 1000):
number -= 1000;
arrA.push(“M”);
break;
case (number >= 900):
number -= 900;
arrA.push(“CM”);
break;
case (number >= 500):
number -= 500;
arrA.push(“D”);
break;
case (number >= 400):
number -= 400;
arrA.push(“CD”);
break;
case (number >= 100):
number -= 100;
arrA.push(“C”);
break;
case (number >= 90):
number -= 90;
arrA.push(“XC”);
break;
case (number >= 50):
number -= 50;
arrA.push(“L”);
break;
case (number >= 40):
number -= 40;
arrA.push(“XL”);
break;
case (number >= 9):
number -= 9;
arrA.push(“IX”);
break;
case (number >= 5):
number -= 5;
arrA.push(“V”);
break;
case (number >= 4):
number -= 4;
arrA.push(“IV”);
break;
case (number >= 1):
number -= 1;
arrA.push(“I”);
break;

}

} input.value = “”;
output.innerHTML = arrA.join(“”);
return;
};

convertBtn.addEventListener(‘click’, toNumeral);
`

10

I found quite a few issues with your code so I’m not sure how you say you are sure it should work.
Here’s just some of the issues I found after about 5 minutes of looking:

This is invalid syntax.

The file name is wrong here.
Also the script tag should be the last line in the body element so as to load after all the page is finished loading.

This button element should not have a for attribute. For attributes are for labels, not buttons.

This is the correct response for the blank number but not for any of the other conditions you have here (check the testcases to compare what you are doing with what they expect).

Please try harder to check your code. This is a certificate level project and it is meant to show what you know.

1 Like
11

Sorry for taking up your time for dumb stuff lik this. Thanks a ton seriously. You guys make the mountain easier to climb. Here’s my code with the obvious adjustments. `<DOCTYPE! html>

Roman Numerical Converter 
  </head>
  <body>
    <h1>
    Roman Numeral Converter
    </h1>
    <input required placeholder="Input Here" class="inline" id="number" type="number">
    <button class="inline" id="convert-btn" type="submit">
      Convert
      </button>
      <div  style="border: solid black; background-color: grey;" class="block"

id=“output”>

     </div>

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

const input = document.getElementById('number'
);
const convertBtn = document.getElementById('convert-btn'
);
const output = document.getElementById('output'
);

let arrA = [];

const toNumeral = () =>{
  output.innerHTML = "";
  
  let number = Number(input.value);
  
  if(number < 0){
    output.innerText = "Please enter a number greater than or equal to 1";
    return
  }  
  else if (number >= 3999){
     output.innerText = "Please enter a number less than or equal to 3999";
  return}
  else if(number == ""){
    output.innerText = "Please enter a valid number";
  return}
  
   arrA = [];
  
  number = (Math.floor(number));
  
  while(number > 0){
    switch(true){
      case (number >= 1000):
      number -= 1000;
      arrA.push("M");
      break;
      case (number >= 900):
      number -= 900;
      arrA.push("CM");
      break;
      case (number >= 500):
      number -= 500;
      arrA.push("D");
      break;
      case (number >= 400):
      number -= 400;
      arrA.push("CD");
      break;
      case (number >= 100):
      number -= 100;
      arrA.push("C");
      break;
      case (number >= 90):
      number -= 90;
      arrA.push("XC");
      break;
      case (number >= 50):
      number -= 50;
      arrA.push("L");
      break;
      case (number >= 40):
      number -= 40;
      arrA.push("XL");
      break;
      case (number >= 9):
      number -= 9;
      arrA.push("IX");
      break;
      case (number >= 5):
      number -= 5;
      arrA.push("V");
      break;
      case (number >= 4):
      number -= 4;
      arrA.push("IV");
      break;
      case (number >= 1):
      number -= 1;
      arrA.push("I");
      break;
    
    }
    

   
  }     input.value = "";
  output.innerHTML = arrA.join("");
  return;
};

convertBtn.addEventListener('click', toNumeral);

CodedPen
This is what I got chief