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

JavaScript
1

Tell us what’s happening:

The issue I am having right now is that I cannot seem to complete 7, 8 or 9. Every time I try to convert a number that’s below 1000, I get the output as M apart from 1, 10 and 100.

When I console log the actual number like at the end of my code, I get the right output though.I also see an issue with console.log(num) and it shows that it minuses a 1000 even if the number inputted is less than 1000

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 Numeral Converter</title>
  </head>
  <body>
    <main>
      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo">
      <h1>Roman Numeral Converter</h1>
      <form id="form">
        <fieldset>
          <label>Enter a number: </label>
          <input type="number" id="number" required>
          <button type="button" id="convert-btn">Convert</button>
        </fieldset>
      </form>
      <div id="output"></div>
    </main>
    <script src="script.js"></script>
  </body>
</html>

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

body{
  padding:50px;
  font-family:Helvetica, Arial, sans-serif;
  font-size:18px;
  background-color:#1b1b32;
  color:#ffffff;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.logo{
  height:30px;
  margin-bottom:20px;
  background-color:#1b1b32;
}

h1{
  text-align:center;
  font-family:Times New Roman;
  margin:20px;
  max-width:300px;
}

form{
  color:#ffffff;
  padding:15px auto;
  border:3px solid #ffffff;
  background-color:#3B3B4F;
  max-width:500px;
  width:100%;
  margin-top:20px;
}

fieldset{
  border: none;
  padding:25px;
  margin:10px 20px;
}

label{
  display:block;
  font-weight:bold;
  font-size:1.4rem;
  margin-bottom:12px;
  text-align:center;
}

input{
  font-size:2.5rem;
  height:60px;
  width:100%;
  padding:5px 10px;
  margin:10px 0;
  color:white;
  background-color:#0A0A23;
  border:1px solid #ffffff;
}

button{
  cursor: pointer;
  width:100%;
  margin-top:12px;
  padding:10px;
  color:black;
  background-color:#FEC043;
  background-image: linear-gradient(#fecc4c, #ffac33);
  border:3px solid #FEAC32;
  font-size:1.5rem;
}

#output{
  color:white;
  background-color:#3B3B4F;
  border:3px solid #ffffff;
  font-size:2.5rem;
  max-width:500px;
  margin-top: 20px;
  padding:15px auto;
  text-align:center;
  width:100%;
  min-height: 50px;
}

/* file: script.js */
const userInput = document.getElementById("number");
const convert = document.getElementById("convert-btn");
const result = document.getElementById("output");


function convertToRoman(num) {
  const numerals = {
    1: 'I',
    4: 'IV',
    5: 'V',
    9: 'IX',
    10: 'X',
    40: 'XL',
    50: 'L',
    90: 'XC',
    100: 'C',
    400: 'CD',
    500: 'C',
    900: 'CM',
    1000: 'M',
  };
  //Stores Roman numerals after conversion
  let romanizedNumerals = '';

  //Creates an array with only the keys and starts from 1000
  const arabicNumerals = Object.keys(numerals).reverse();

 //Iterate through all the ArabicNumerals starting from 1000 and taking away from the number
  arabicNumerals.forEach(key => {
    while(key <= num){
      romanizedNumerals += numerals[key];
      num -= key;
  }

console.log(num)


});
return romanizedNumerals;
}

convert.addEventListener("click",numberInput);
function numberInput(){
  if(userInput.value === ''){
    result.innerHTML = "Please enter a valid number";
  } 
  else if(userInput.value < 1){
    result.innerHTML = "Please enter a number greater than or equal to 1";
  }
  else if(userInput.value >= 4000){
    result.innerHTML = "Please enter a number less than or equal to 3999"
  }
  else{
     result.innerHTML = convertToRoman(userInput.value);
  }
};

console.log(convertToRoman(9))
console.log(convertToRoman(99))
console.log(convertToRoman(232))

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

2

What are the types of values being compared here?

Both 100 and 500 have the letter C.

3

I am not entirely sure what is meant by that question or if i know what the answer is, but from what I understand about my code is that say for example the user types in 1210. The code will first see if the key (starting from 1000) is less than 1210, and if it is the while loop will run and return an M and -1000 from the num so leaving me with 210.Then it will loop to the next key and see, until it goes to the 9th key( 100) and return 2 C’s and - 200 from num leaving us with 10.Then once again loops to ten and returns an X . 1210 = MCCX.

4

The logic in your code is fine (other than you need to fix the issue with 500 in your numerals object). But you’ve got a type issue that is causing it not to work properly. In JS, there is a difference between a number value and a string value, especially when comparing these values.

1000 < 200

The above comparison will return false because the number 1000 is definitely not less than the number 200.

"1000" < "200"

The above comparison will return true because the string “1000” is actually less than then string “200” due to way strings are sorted in JS.

I’m assuming you want to compare the Number stored in the variable key and the Number stored in the variable num. I would verify that this is what you are doing. Are there really numbers in those variables? Do you know how you would check this?

1 Like
5

Thank you for that very clear explanation.I am assuming I would try console logging the information and will attempt to check and fix the variables so that the number stored is compared.

6

So i have opted to using parseInt to ensure that the numbers of both is being compared and it did complete the test.

 while(parseInt(key) <= parseInt(num)){

But for future projects, how would I checkif the variables are storing numbers

7

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