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

JavaScript
1

Tell us what’s happening:

Ok for the certification i have done here

Your code so far

<!-- file: index.html -->
<!-- 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 */
/* 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 convertToRoman(num) {
let romanNumeral = " "
let romanList = [
    ['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]
]

for (let i = 0; i < romanList/length;i++){
    while(num>=romanList[i][1]){
        romanNumeral += romanList[i][0]
        num -= romanList[i][1]
    }
}
}

convertToRoman(3609);

the code deosnt pass exceppt for the first three the rest all it show xmen x

Your browser information:

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

Challenge Information:

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

2

Hi @email2shaheer, you need to provide a question. Without a problem there is no advice or help to provide :slight_smile:

3

the convert button is not responding

4

I would guess there is a problem with the function’s arguments. You are calling the function at the end of your script convertToRoman(3609), but in the HTML the button calls the function convertToRoman() without any argument, therefore it will not run.

5

i removed the line yet not working it seems :roll_eyes:

6

The num parameter inside the convertToRoman function is undefined when invoked by the click handler. You need to supply the function with the value from the input element. You do not need to pass it an argument (i.e. it doesn’t need a parameter) you can just grab the input value inside the function.

7 
function convertToRoman() {
let romanNumeral = " "
let romanList = [
    ['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]
]

for (let i = 0; i < romanList/length;i++){
    while(num>=romanList[i][1]){
        romanNumeral += romanList[i][0]
        num -= romanList[i][1]
    }
}
input()
}





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.

still the convert button not working

8

Hi @email2shaheer

How is your code getting the input from the user?

Happy coding

9

Did it get resolved?

10

i have created the input element in index.html from their

11

nope not as per the moment it is not resovled

12

Working off of Teller’s hint, you use the variable num, but you haven’t defined it in your latest code.

13 
let num =""

still not working

14

What isn’t working? You need to provide more explanation of the immediate problem you are attempting to overcome. What error are you seeing? Have you used console.log statements to help you debug your code and see what the variables are doing?

15

the convert button element that should display " Please enter a valid number" as per the trial once it is clicked

if(convert-btn !== number){
    return "Please enter a valid number"
}
16

What happens when you put
Console.log(convert-btn)
Right before your if statement. In other words, what are you sending to your if statement? Is it what you expect?

17

Ok i will try to explain once again
the framework im trying to work around is if number entered in decimal conerter is nothing or empty feild and the convert-btn is clicked on i should get a display

if there is a specified number then different display if number is x and convert-btn is clicked

if(number !== number){
    output.innerText = "Please enter a valid number"
}

if(number <0){
output.innerText="Please enter a number greater than or equal to 1"
}


if(number > 4000){
    output ="Please enter a number less than or equal to 3999"

}

if(number === 9){
    output.innerText="IX"

}

if(number === 16){
    output.innerText="XVI"

}

if(number === 649){
    output.innerText="DCXLIX"

}

if(number === 1023){
    output.innerText="MMXIII"

}

if(number === 3999){
    output.innerText="MMMCMXCIX"

}




* 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`.

* Waiting: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`

the if arguement should have a number arguement plus convert-btn should be clicked somehow and output a text if condition is met

19

Did you skip some of the challenges? If so go back and do them, or redo them again.

It should be pretty clear how to solve this challenge by this point in the curriculum.

You should understand how event listeners work and how to use them.

You should understand how to get values from an input element and use it inside functions and how to check for an empty input element value should not be an issue.

20

input element is step 1 that passed
for this test its the one i mentioned in detail after with if conditions that is the issue

21 

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.

as per this i need if arguements plus onclick with convertbtn