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

JavaScript
1

Tell us what’s happening:

Please my code is not working. What have I mixed up?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Roman Numeral Converter</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<center><h1>Roman Numeral Converter</h1>
<p>Please enter your chosen digits:</p>
<input type="number" id="number">
<br>
<br>
<button id="convert-btn" onclick="convertToRomNum(number)">Convert</button>
<br>
<br>
<div id="output"></div>
</center>
<script src="script.js"></script>
</body>
</html>

/* file: script.js */
const convertBtn = document.getElementById("convert-btn");
const romanNumerals = [
{value: 1000, numeral: 'M' },
{value: 900, numeral: 'CM' },
{value: 500, numeral: 'D' },
{value: 400, numeral: 'CD' },
{value: 100, numeral: 'C' },
{value: 90, numeral: 'XC' },
{value: 50, numeral: 'L' },
{value: 40, numeral: 'XL' },
{value: 10, numeral: 'X' },
{value: 9, numeral: 'IX' },
{value: 5, numeral: 'V' },
{value: 4, numeral: 'IV' },
{value: 1, numeral: 'I' }
];

function convertToRomNum(number){
const number = document.getElementById("number").value;
const output = document.getElementById("output");
  let romanNumeral = "";
if (number === ""){
 output.innerHTML = "Please enter a valid number"; 
 return;
}else if (number < 0){
  output.innerHTML = "Please enter a number greater than or equal to 1";
return;
} else if (number >= 4000 ){
  output.innerHTML = "Please enter a number less than or equal to 3999";
  return;
}
    for (let i = 0; i < romanNumerals.length; i++) {
while (number >= romanNumerals[i].value) {
romanNumeral += romanNumerals[i].numeral;
number -= romanNumerals[i].value;
        }
    }
    output.innerHTML = romanNumeral;

}

/* file: styles.css */
body{
  background: #ffbb00;
}
#number {
  border: solid 15px gray;
  width: 200px;
  height:100px;
  font-size: 30px;
  text-align:center; 
  font-weight: bold;
}
#convert-btn{
width: 100px;
border: solid 5px gray;
height: 45px;
}
#output{
  border: solid 10px gray;
  width:200px;
height:100px;
background:white;
}
button:active{
  background-color: green;
}

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Mobile Safari/537.36

Challenge Information:

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

2

hi there,

as this is a certificate project, we cannot answer a general question like this. You should ask a specific question to get help. Like you can tell us which testcase is not working for example and what part of the code you are struggling with for example.

3

The for-while loop which should evaluate other numbers outside of the boundaries of -1, “” and above 4000

4

Please be more specific in your question.

We recommend familiarising yourself with how to ask a question on this forum.

5

Thanks for the information.
My for-loop is not working with number as the input
for (let i = 0; i < romanNumerals.length; i++) {
while (number >= romanNumerals[i].value) {
romanNumeral += romanNumerals[i].numeral;
number -= romanNumerals[i].value;
}
}
output.innerHTML = romanNumeral;

6

What do you think should happen after you get the convert button element? (I noticed you got the element but never did anything with it)

7

convertBtn.addEventListener(“click”, convertToRomNum(()=>{(parseInt(number))};

8

do you still need help? If so, can you describe what it is you are trying to do that failed specifically and what debugging you did (like you checked the console for errors, you added console.logs, what did they show you)
Also share your most recent code as I think you have changed it.

For this line of code: you seem to be passing an anonymous function to the convertToRomNum function. So does this mean that your function now expects a function as an argument?