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

JavaScript
1

Tell us what’s happening:

What is wrong?This JAVA code should fill all conditions:

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>

<html lang="en">
  <script rel="stylesheet" src="script.js">
    </script>

<head>
  <meta name=viewport
  content="width=device-width, initialscale=1.0">
<meta charset=UTF-8>
<meta name="viewport" content="width=device-width, intial-scale=1.0">








</head>

<input id=number type=text ></input>
<button id="convert-btn">
  CONVERT
</button>
<p id=output><p>












































































  </html>

/* file: styles.css */
.output{color:red;
width:90%;
max-width:499px;
min-width:54px;
margin-top:25px;
padding:15px;
border:3px var(--gray-05);
text-align:center;
overflow-wrap:break-word;



}

/* file: script.js */
const convertNumerals=(num)=>{

  const ref=[{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"}];

if (num<1){

output.textContent="Please enter a number greater than or equal to 1";return}
if (num >=4000){ output.textContent="Please enter a number less than or equal to 3999";return}
let roman="";
for(let i=0;i<ref.length;i++){while
(num >=ref[i].value){roman+=ref[i].numeral;num -=ref[i].value} };

}

const numberInput=document.getElementById("number");
const convertBtn=document.getElementById("convert-btn");
const output=document.getElementById("output");



document.addEventListener("DOMContentLoader",()=>{const convertBtn =document.getElementById("convert-btn");
if(convertBtn)
 { const num=parseInt(numberInput.value,10);
if(isNaN(num)){output.textContent="Please enter a valid number"
return

}
output.textContent=convertNumerals(num);
 }
else{console.error("Element with id'convert-btn' not found")}

});

Your browser information:

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

Challenge Information:

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

2

Note - Java and JavaScript are completely different things.

It would be really helpful if you use conventional spacing and formatting in your code so it is easier to read.

1 Like
3

Here is what your code looks like with human-friendlier formatting:

/* file: script.js */
const convertNumerals = (num) => {
  const ref = [
    { 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" }
  ];

  if (num < 1) {
    output.textContent = "Please enter a number greater than or equal to 1";
    return;
  }
  if (num >= 4000) {
    output.textContent = "Please enter a number less than or equal to 3999";
    return;
  }
  let roman = "";
  for (let i = 0; i < ref.length; i++) {
    while (num >= ref[i].value) {
      roman += ref[i].numeral; num -= ref[i].value
    }
  }
}

const numberInput = document.getElementById("number");
const convertBtn = document.getElementById("convert-btn");
const output = document.getElementById("output");

document.addEventListener("DOMContentLoader", () => {
  const convertBtn = document.getElementById("convert-btn");
  if (convertBtn) {
    const num = parseInt(numberInput.value, 10);
    if (isNaN(num)) {
      output.textContent = "Please enter a valid number"
      return
    }
    output.textContent = convertNumerals(num);
  } else {
    console.error("Element with id'convert-btn' not found")
  }
});
1 Like
4

I am not sure how you expect this to work, but I am pretty sure it does not do what you expect.

5

Please explain further

6

What do you think that if statement does?

7

Check if valid number has been entered.What is wrong with my code in general?

1 Like
8

Do HTML attribute values need quotes, or not? You’re using both here.

9

How does this if statement check if a valid number is entered?

When does this trigger? It is not when the button is pressed.

1 Like
10

What is HTML? - What Is an HTML Boilerplate, and Why Is It Important? | Learn | freeCodeCamp.org

Please review this for an example of a basic HTML structure to start your projects with.

You can also use an HTML validator like W3C Markup Validation Service

Learn Basic JavaScript by Building a Role Playing Game: Step 16 | freeCodeCamp.org

This step explains where the script element should go in your HTML…and why.

Knowing that, think about why you need an event listener for DOMContentLoaded.

12

It says 5 and 12 on the test list are not completed

document.addEventListener("DOMContentLoaded",function(){const convertNumerals=(num)=>{ const ref=[{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"},]; if (num<1) return "Please enter a number greater than or equal to 1"; if (num >=4000)return"Please enter a number less than or equal to 3999"; if(isNaN(num)||num === "")return "Please enter a valid number"; let roman=""; for(let i=0;i<ref.length;i++){while (num >=ref[i].value){roman+=ref[i].numeral;num -=ref[i].value} }; return roman; } const numberInput=document.getElementById("number"); const output=document.getElementById("output");const convertBtn =document.getElementById("convert-btn"); convertBtn.addEventListener("click",function() { const num=parseInt(numberInput.value,10); output.textContent=convertNumerals(num); }); });
13

please format your code properly, what you posted is not readable

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 (').

14

Aren’t you seeing this syntax error in the console?

image
image1185×648 139 KB

15

I really, really, really recommend you do not write code all in a single line like that. That’s really a bad anti-pattern.

1 Like