Tell us what’s happening:
For some reason all my tests work except when 9 is inputted. Although everything seems to work as intended, so I am not sure what is wrong?
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset = 'utf-8'>
<link rel='stylesheet' href="styles.css">
<link rel="icon" type="image/png" href="https://cdn.freecodecamp.org/universal/favicons/favicon.ico">
</head>
<body>
<div id="top-part">
<img src="https://i.pcmag.com/imagery/reviews/01tPXClg2WjLamQzScplH3y-15.fit_scale.size_1028x578.v1627670281.png"></img>
<h1 id="name">ROMAN NUMERAL CONVERTER<h1>
</div>
<form>
<fieldset>
<h2>Enter A Number</h2>
<input type="number" id="number"></input>
<button id="convert-btn">Convert</button>
</fieldset>
</form>
<div id="output">
<p id="outputArea"></p>
</div>
</body>
<script rel="script" src="script.js">
</script>
</html>
/* file: script.js */
//creating a table to use for comparison later
const table = [{
romanNumeral: "M",
arabicNumeral: 1000
},
{
romanNumeral: "CM",
arabicNumeral: 900
},
{
romanNumeral: "D",
arabicNumeral: 500
},
{
romanNumeral: "CD",
arabicNumeral: 400
},
{
romanNumeral: "C",
arabicNumeral: 100
},
{
romanNumeral: "XC",
arabicNumeral: 90
},
{
romanNumeral: "L",
arabicNumeral: 50
},
{
romanNumeral: "XL",
arabicNumeral: 40
},
{
romanNumeral: "X",
arabicNumeral: 10
},
{
romanNumeral: "IX",
arabicNumeral: 9
},
{
romanNumeral: "V",
arabicNumeral: 5
},
{
romanNumeral: "IV",
arabicNumeral: 4
},
{
romanNumeral: "I",
arabicNumeral: 1
}
]
// getting the element that holds the input value
let number = document.getElementById('number');
//getting the element that will show the answer
let output = document.getElementById('outputArea');
// initializing variables ... we will set this later when convert button is clicked
let desiredNum ="";
let startingNum = 0;
let outputString = "";
const convertBtn = document.getElementById('convert-btn');
convertBtn.addEventListener("click", () => {
desiredNum = number.value
if(desiredNum == ""){
outputString = "Please enter a valid number";
output.innerHTML = outputString;
}
else if(desiredNum < 0){
outputString = "Please enter a number greater than or equal to 1";
output.innerHTML = outputString;
}
else if(desiredNum > 3999){
outputString = "Please enter a number less than or equal to 3999";
output.innerHTML = outputString;
}else{
convertNumber(0);
}
//for testing to see if correct output works... IT DOES :)
//console.log(desiredNum);
})
const convertNumber = (currentRow) =>{
//the while loop compares the desirednum to the startingnum
while (startingNum != desiredNum){
//here we check if the current row num + startingNum is greater than our desiredNum. If it is we go to the next row so we increment the index of currentRow
if((startingNum + table[currentRow].arabicNumeral) > desiredNum){
currentRow++;
}
//here we check if the current row num + startingNum is equal to the desiredNum. If it is we update startingNum and add roman numeral to our outputString
else if((startingNum + table[currentRow].arabicNumeral) == desiredNum)
{
outputString += table[currentRow].romanNumeral;
startingNum += table[currentRow].arabicNumeral;
output.innerHTML = outputString;
break;
}
//here we check if the currentrow num + starting num is less than our desiredNum. If it is we update startingNum, and add the roman numeral to our outputString
else if ((startingNum + table[currentRow].arabicNumeral) < desiredNum){
outputString += table[currentRow].romanNumeral;
startingNum += table[currentRow].arabicNumeral;
}
}
//we need to reset the values so next time we use the converter it can reassess from the beginning
startingNum = 0;
outputString = "";
}
/* file: styles.css */
*{
color: white;
}
img {
width: 17em;
margin-bottom: 0;
}
@media only screen and (max-width: 400px){
img{
width: 15em;
}
}
body{
background-color: #0a0a23;
display: block;
text-align: center;
}
#top-part{
display: block;
text-align: center;
}
#name{
margin-top: 0;
}
input{
color: black;
width: 80%;
height: 3em;
text-align: center;
}
button{
color: black;
background-color: orange;
width: 40%;
height: 4em;
margin-top: 1em;
}
form{
text-align: center;
margin: auto;
background-color: #3b3b4f;
}
@media only screen and (min-width: 800px){
form{
margin-left: 20em;
margin-right: 20em;
}
#output{
margin-left: 20em;
margin-right: 20em;
}
}
#output{
border: 1px solid white;
margin-top: 1em;
background-color: #3b3b4f;
}
#outputArea{
padding: 1em;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
Challenge Information:
Build a Roman Numeral Converter Project - Build a Roman Numeral Converter
