const input = document.getElementById("number");
const convertButton = document.getElementById("convert-btn");
const output = document.getElementById("output");
const numerals = [
["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],
];
convertButton.addEventListener("click", () => {
if (input.value === "") {
output.innerText = "Please enter a valid number";
} else if (parseInt(input.value) < 1) {
output.innerText = "Please enter a number greater than or equal to 1";
} else if (parseInt(input.value) > 3999) {
output.innerText = "Please enter a number less than or equal to 3999";
} else {
let result = "";
let value = parseInt(input.value);
for (const [roman, arabic] of numerals) {
while (value >= arabic) {
result += roman;
value -= arabic;
}
}
output.innerText = result;
}
});
Can you add a link to the step?
Please Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!
This is a certification project.
Post your HTML.
I tested your code with the demo project HTML and it passed all the tests. So I assume something is wrong in your HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Roman Numeral Converter</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input id="number">
<button id="convert-btn">Convert</button>
<div id ="output"></div>
<script src="index.js"></script>
</body>
</html>
<script src="index.js"></script>
Your script file is not named correctly. It must be named script.js
That’s what I get for copying a boilerplate from online. Thank you very much.