I think i completed all of the user stories, but when I submit it, I got error from saying that my output didn’t satisfy the conditions(but I tried checking it though, the output seems to work just fine), if anyone has any idea where my program went wrong, please tell me. very much appreciated for everyone answer
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ROMAN NUMERAL CONVERTER</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="converter">
<h1>ROMAN NUMERAL CONVERTER</h1>
<form class="crt container">
<div class="input-tab">
<input id="number" type="number" autocomplete="off"/>
<button id="convert-btn">ENTER</button>
</div>
<div class="output-tab">
<div id="loading-tab" class="loading-tab hidden">
<h2>LOADING</h2>
<div class="loading-bar">
<div class="bar">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<p id="output">Please enter your input</p>
</div>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
JAVA
const input = document.getElementById("number");
const output = document.getElementById("output");
const button = document.getElementById("convert-btn");
const load = document.getElementById("loading-tab");
const romanTable = [
{symbol: "M",value: 1000},
{symbol: "CM",value: 900},
{symbol: "D",value: 500},
{symbol: "CD",value: 400},
{symbol: "C",value: 100},
{symbol: "XC",value: 90},
{symbol: "L",value: 50},
{symbol: "XL",value: 40},
{symbol: "X",value: 10},
{symbol: "IX",value: 9},
{symbol: "V",value: 5},
{symbol: "IV",value: 4},
{symbol: "I",value: 1}
]
const checkInput = () => {
const value = input.value
if (!value) {
return "Please enter a valid number"
} else if (value <= 0) {
return "Please enter a number greater than or equal to 1"
} else if (value >= 4000) {
return "Please enter a number less than or equal to 3999"
}
}
//loading function
const loading = () => {
load.classList.toggle("hidden");
output.classList.toggle("hidden");
}
function loader() {
setTimeout(loading,500);
loading();
}
//------
function converter(val) {
let roman = "";
const error = checkInput();
if (error) {
return error;
}
while (val > 0) {
for (const item of romanTable) {
if (val >= item.value) {
roman += item.symbol;
val -= item.value;
break;
}
}
}
return roman;
}
button.addEventListener("click",() => {
loader()
output.innerText = converter(input.value);
});
link to the problem