Tell us what’s happening:
I have rewritten this test for the second time now, I learned a lot about how to shorten it and how to make good use of loops. Both times my entire code worked. The problems it tells me my code has is when I enter the numbers 16, 649, 1023 and 3999. But my code gives me the right answers for all four of them, so I don’t really know what I’m doing/coding wrong.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./styles.css">
<title>Roman Numeral Converter</title>
</head>
<body>
<div id="div1">
<h1>Roman Numeral <br/> Converter</h1>
</div>
<div id="div2">
<p id="text">Enter a number:</p>
<input id="number" type="number"><br/>
<button id="convert-btn">Convert</button>
</div>
<div id="output" class="div3">Output</div>
<script src="./script.js"></script>
</body>
</html>
/* file: styles.css */
body{
font-family: 'Arial', sans-serif;
background-color: #4B5320;
color: white;
text-align: center;
}
div{
width: 500px;
margin-left: auto;
margin-right: auto;
border-radius: 5px;
}
h1{
margin-top: 70px;
margin-bottom: 35px;
font-size: 40px;
}
#div2{
height: 180px;
border-style: solid;
background-color: #8F9779;
font-weight: bold;
font-size: 25px;
padding-bottom: 15px;
margin-bottom: 25px;
}
.div3{
display: flex;
justify-content: center;
align-items: center;
height: 80px;
border-style: solid;
background-color: #8F9779;
font-weight: bold;
font-size: 25px;
}
#number{
padding-left: 15px;
width: 380px;
font-size: 32px;
border-radius: 5px;
border-style: none;
margin-bottom: 15px;
}
#convert-btn{
width: 399px;
height: 40px;
font-size: 20px;
border-radius: 5px;
border-style: none;
margin-bottom: 25px;
}
/* file: script.js */
const number = document.getElementById("number");
const convertBtn = document.getElementById("convert-btn");
const output = document.querySelector("#output");
const convertToRoman =(input)=>{
if (input === ""){
output.innerText = "Please enter a valid number";
}else if(input >= 4000){
output.innerText = "Please enter a number less than or equal to 3999";
}else if(input <=0){
output.innerText = "Please enter a number greater than or equal to 1";
}else if(0<input<4000){
makeRoman(input);
const result = outputArray.join("");
output.innerText = result;
}
}
let outputArray=[];
const romanLettersArray = ["I","X","C","M"];
const romanLettersArray5=["V","L","D"];
const romanCalculation = (int)=>{
const one = romanLettersArray[int];
const two = one+romanLettersArray[int];
const three = two+romanLettersArray[int];
const four = one + romanLettersArray5[int];
const five = romanLettersArray5[int];
const six = five + one;
const seven = five + two;
const eight = five + three;
const zero = romanLettersArray[int+1];
const nine = one + zero;
const romanCalculator = ["", one, two, three, four, five, six, seven, eight, nine];
return romanCalculator;
}
const makeRoman=(input)=>{
const reversedInput = input.split("").reverse();
for(let i=0; i<=number.value.length-1; i++){
const romanNumbersSpecific = romanCalculation(i);
outputArray.unshift(romanNumbersSpecific[reversedInput[i]]);
}
}
const checkUserInput = () => {
if (number.value < 0) {
output.innerText = "Please enter a number greater than or equal to 1";
return;
}
convertToRoman(number.value);
};
convertBtn.addEventListener("click", checkUserInput);
number.addEventListener("keydown", (e) => {
if (e.key === "Enter") {
checkUserInput();
}
outputArray=[];
}
);
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36
Challenge Information:
Build a Roman Numeral Converter Project - Build a Roman Numeral Converter