Build a Roman Numeral Converter Project - Beta JavaScript

Tell us what’s happening:

all of the required tests, give the appropriate output; yet fCC states that the code doesn’t!
I am very confused as to why.
What are the the specific test algorithms?

link to project area

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" />
    <link rel="stylesheet" href="styles.css" />
    <title>Roman</title>
  </head>
  <body>
    
    <div id="output">
      <label for="number"
        >Arabic to Roman Numerals<input
          type="number"
          name="arabicNumeral"
          id="number"
          min="0"
          max="3999"
          step="1"
          placeholder="Enter an integer between 0 and 3999"
        />
        
      </label>

      <hr />
      <button type="button" id="convert-btn" onclick="convertToRoman()">
        Convert
      </button>

      <button type="button" id="display"></button>
    </div>
    <br><br><br>
    <div class="reset" id="reset">
      <button type="button" id="reset-btn" onclick="resetResult()">
        Reset
      </button>
    </div>

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




/* file: styles.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Input element with id "number" */
#number {
  padding: 10px;
  margin: 0 auto;
  border: 2px solid #eee;
  box-shadow: 0 0 15px 4px rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  width: 100%;
  font-size: inherit;
}

/* Button element with id "convert-btn" */
#convert-btn {
  padding: 10px;
  background-color: #3f51b5;
  border: none;
  margin: 0 auto;
  color: #fff;
  font-weight: 600;
  border-radius: 5px;
  width: 100%;
}

/* Div element with id "output" */
#output {
  padding: 10px;
  border: 1px solid gray;
  box-sizing: border-box;
  width: 90%;
  margin: 0 auto;
  text-align: center;
  font-weight: 600;
  color: #4f51b1;
}
/* Div element with id "reset" */
#reset {
  padding: 10px;
  border: 1px solid gray;
  box-sizing: border-box;
  width: 90%;
  margin: 0 auto;
  text-align: center;
  font-weight: 600;
  color: #4f51b1;
}

/* file: script.js */
// Function to convert decimal number to Roman numeral
const inputField = document.getElementById('number');
const outputField = document.getElementById('output');
const convertButton = document.getElementById('convert-btn');

function convertToRoman() {
  let arabic = inputField.value;
  let roman = '';

  if (arabic === '') {
    outputField.innerHTML = 'Please enter a valid number.';
  } else if (arabic < 0) {
    outputField.innerHTML = 'Please enter a number greater than or equal to 1.';
  } else if (arabic > 3999) {
    outputField.innerHTML = 'Please enter a number less than or equal to 3999.';
  } else {
    // Rest of the conversion logic
    const arabicArray = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1];
    const romanArray = [
      'M',
      'CM',
      'D',
      'CD',
      'C',
      'XC',
      'L',
      'XL',
      'X',
      'IX',
      'V',
      'IV',
      'I',
    ];

    for (let i = 0; i < arabicArray.length; i++) {
      while (arabicArray[i] <= arabic) {
        roman += romanArray[i];
        arabic -= arabicArray[i];
      }
    }

    outputField.innerHTML = roman;
  }
}
// Rest and Reload the page
function resetResult() {
  inputField.value = ''; // Clear the input field
  outputField.innerHTML = ''; // Clear the result
  location.reload(); // Reload the page
}




Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:121.0) Gecko/20100101 Firefox/121.0

Challenge Information:

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

What error are you getting?

When I run the fCC test for my code; all of the following do not pass the fCC tests! Yet when I test my code in the console with each of the numbers from below; the results given, are as expected. But fCC says otherwise.
X. When the #number element contains the number -1 and the #convert-btn element is clicked, the #output element should contain the text Please enter a number greater than or equal to 1

X. When the #number element contains the number 4000 or greater and the #convert-btn element is clicked, the #output element should contain the text Please enter a number less than or equal to 3999

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

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

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

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

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

I don’t think it wants a period at the end of the sentence in the first two cases.

Also try using template literals `` in your innerHTML
Here are two examples:

outputField.innerHTML = `Please enter a number`;
outputField.innerHTML = `${result}`;

thanks for your assistance, I will try these :slight_smile:

I have changed the output text, to the exact message required be fCC. Please see src img
The same error message!
I am really confused :-/
I wish someone from fCC would be able to just explain (not give answer) why the code does not conform to the fCC tests!

I notice in your console output it says

[TypeError: numberInputEl is null]

Do you have any element or variable called numberInputEl or some code using numberInputEl? If so, check that you are handling situations where it could be null - the tests may want it to be 0.

I have also found in the past that the tests don’t like comments in the code or in the html or styles.css - try removing them and see if that makes a difference.

I agree!

1 Like

I also saw that, fCC gave this error numberInputEl after testing. There is no function or variable name “numberInputEl” within the code from any of the files! I am confused as to where this has come from. Have you tried testing my code within a browser on your computer with all of the input requirements and seeing if the expected output is correct?
Do you know of a specific person I could message at fCC to assist me? Thanks again for your support.

1 Like

I have removed all of the comments from each file, saved the code, re-run the test, and the same output! :frowning:

1 Like

Hi Mikal, The numberInputE1 is null message in the picture is similar to what I am getting when I run your code [TypeError: Cannot set properties of null (setting 'value')]

My opinion (possibly incorrect but worth a try):

it seems you are trying to do something like property.value but the property itself is null so obviously you are not able to go ahead getting the value

The possible solution is to debug your code with something as simple as a console.log for all variables so you can see what value is being retrieved or stored

I have a gut feeling you start here since the message says you are trying to set a property:

function resetResult() {
  inputField.value = ''; // Clear the input field
  outputField.innerHTML = ''; // Clear the result
  location.reload(); // Reload the page
}

We will find a solution eventually. Dont worry. You are doing wonderfully well.

Hi Sean, thanks for your feedback :slight_smile:
I am now really confused :-/ when I run the code in live-server via vscode, it runs in the browser, with the correct expected output, with no error messages in the console.
See attached src img
Any ideas?




1 Like

hi @ilenia @pkdvalis @Suzanne102 are you able to assist me please. I am trying to progress through the beta DSA JS Cert course. I am on the Roman Numeral project. Yet the fCC tests keep failing my code, with no proper explanation or support! I have tried many different solutions (that work locally via vscode and live-server in the browser) but doesn’t work on the fCC platform. I have not been able to progress for 5 days now, which is extremely frustrating. Any advice, supports, hints would be greatly welcomed. Thank you.

1 Like

There’s an organizational problem here that is confusing the tests. Everything here is nested within the “output” div, the input, the convert button, etc.

Just un-nest everything from that output div, keep them separate. You could put the output div last.

1 Like

thank you so much for your advice, much appreciated. I will implement your recommendation.
May I please make a suggestion.

  • Have this stated clearly in the instructions ‘User Stories’ for the project.
  • Have the test respond appropriately by stating ‘one div for the output’
  • or adjust the tests so that they are not “confused”
    Without a clear explanation, it is like fighting a fire, not knowing where to get the water, and only having buckets with holes in them! This is very frustrating for a person learning to code; invokes doubts about their abilities, and induces ‘imposter syndrome’
1 Like

I understand, but what you did here was unusual. It would be very difficult to make the tests catch every single possibility and return an appropriate error. “Do not nest the input field and button in the output div” probably would not occur to anyone to check for when writing the tests.

The user stories here are pretty open ended, but that does allow for flexibility in your approach.

I was able to catch this because when I was trying to understand how everything was put together it was strange to have all of those elements within the “output” div. It actually didn’t even stand out as an “error” to me, I just re-arranged it a bit so it was more clear to me and it worked!

So, this is a pretty natural troubleshooting technique, to simplify or re-organize the code a bit. Eventually you might have deleted everything and started from scratch and done it in a different way and it would have worked. A process entirely familiar to programmers of all levels.

Spending days on this problem can seem frustrating but you now know this code inside and out and you’ve learned a lot. Learning is painful. Embrace the pain. If it was easy you wouldn’t be learning anything. That includes these weird glitches.

Programming computers is all weird glitches that turn out to be something simple. Or complicated.

1 Like

Thanks again for your explanation.
The instructions “User Stories” (I don’t understand this unusual term in this context) states a div with id output ; as you have said, that the instructions are ‘open ended’ ; but this then creates a dichotomy between what the user will create and what the fCC tests are specifically looking for, so the code passes its tests.
The instructions (user stories) should be written to the fCC tests that will be applied to the code.
I would like to make this as suggestion for all of the instructions (user stories); so that other users of the fCC site won’t experience the same type of angst that I did.
I would like to support here, and be a QC / QA Tester; and outline the mis-communication between the fCC platform and the user.

1 Like

People are working to improve the performance of the site all the time.

If you’re curious, you can review the tests themselves here:
https://github.com/freeCodeCamp/freeCodeCamp/blob/main/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/build-a-roman-numeral-converter.md

I can see that mysterious “numberInputEl” variable there. You could look at the tests to analyze what went wrong, and propose a change.

You could even just open an issue for this particular problem:
https://www.freecodecamp.org/news/how-to-report-a-bug-to-freecodecamp/ (you can scroll down to “How to search an issue on GitHub”)

When you open an issue you can describe the problem and suggest a solution and there can be a discussion on what to do.

1 Like

@goobric Have you tried your code in the actual FCC certification project? Try adding a number in your input and then check it to see what happens. I think this will tell you all you need to know about why your code isn’t passing.

You can’t have all of those other elements nested in the #output div because when you set innerHTML on #output then it wipes away all those other elements. So you can only use your converter once. This is why the tests aren’t passing.

2 Likes

i think by default anything passed into html input even if it has a type number,
you are only telling html input tag that u want only type number but not javascript …
so javascript will still see it as a string…
my suggestion is to still convert your value input to number in javascript

Number(input.value)
1 Like

please read the full conversation with attached images

1 Like