Tell us what’s happening:
Having some trouble with my code. None of the tests seem to pass. Not sure if it is a problem with my functions or if there is a typo I’m not seeing.
Your code so far
<!-- file: index.html -->
<head>
<link rel='stylesheet' href='styles.css'/>
</head>
<body>
<h1>Roman Numeral Converter</h1>
<label for='number'>Enter a number: </label>
<input type='number' id='number'></input>
<button id='convert-btn'>Convert</button>
<div id='output'></div>
<script src="script.js"></script>
</body>
/* file: script.js */
const numInput = document.getElementById('number');
const button = document.getElementById('convert-btn');
const output = document.getElementById('output');
const roman = {
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
};
const keys = Object.keys(roman).reverse();
function numberToRN(numInput) {
let result = "";
while (numInput > 0) {
let modified = false;
keys.forEach((key) => {
if (numInput >= key && !modified) {
numInput -= key;
result += roman[key];
modified = true;
}
})
}
output.innerText = result;
}
const checkUserInput = () => {
if(numInput.value === "" || [a-z]){
alert("Please enter a valid number")
} else if (numInput.value < 0){
alert("Please enter a number greater than or equal to 1")
} else if (numInput.value >= 4000) {
alert("Please ener a number less than or equal to 3999")
} else {
output.textContent = numberToRN();
}
};
button.addEventListener("click", () => {
numberToRN(Number(num.value));
});
numInput.addEventListener("keydown", (e) => {
if (e.key === "Enter") {
checkUserInput();
};
/* file: styles.css */
body {
background-color: #AD0F0F;
font-family: "Times New Roman", Times, serif;
font-size: 40px;
display: flex;
flex-direction: column;
align-items: center;
margin: 20px;
}
input {
margin: 15px 0;
height: 30px;
width: 200px;
}
#convert-btn {
background-color: #18D3DF;
cursor: pointer;
border: none;
padding: 4px;
width: 80px;
height: 30px;
}
#output {
margin: 20px 0;
min-width: 200px;
width: fit-content;
min-height: 80px;
word-break: break-word;
padding: 20px;
border: 5px solid #18D3DF;
font-size: 2rem;
text-align: center;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:129.0) Gecko/20100101 Firefox/129.0
Challenge Information:
Build a Roman Numeral Converter Project - Build a Roman Numeral Converter