Tell us what’s happening:
all of the required tests, give the appropriate output; yet fCC states that the code doesn’t!
I am very confused as to why.
What are the the specific test algorithms?
link to project area
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Roman</title>
</head>
<body>
<div id="output">
<label for="number"
>Arabic to Roman Numerals<input
type="number"
name="arabicNumeral"
id="number"
min="0"
max="3999"
step="1"
placeholder="Enter an integer between 0 and 3999"
/>
</label>
<hr />
<button type="button" id="convert-btn" onclick="convertToRoman()">
Convert
</button>
<button type="button" id="display"></button>
</div>
<br><br><br>
<div class="reset" id="reset">
<button type="button" id="reset-btn" onclick="resetResult()">
Reset
</button>
</div>
<script src="script.js"></script>
</body>
</html>
/* file: styles.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Input element with id "number" */
#number {
padding: 10px;
margin: 0 auto;
border: 2px solid #eee;
box-shadow: 0 0 15px 4px rgba(0, 0, 0, 0.06);
border-radius: 10px;
width: 100%;
font-size: inherit;
}
/* Button element with id "convert-btn" */
#convert-btn {
padding: 10px;
background-color: #3f51b5;
border: none;
margin: 0 auto;
color: #fff;
font-weight: 600;
border-radius: 5px;
width: 100%;
}
/* Div element with id "output" */
#output {
padding: 10px;
border: 1px solid gray;
box-sizing: border-box;
width: 90%;
margin: 0 auto;
text-align: center;
font-weight: 600;
color: #4f51b1;
}
/* Div element with id "reset" */
#reset {
padding: 10px;
border: 1px solid gray;
box-sizing: border-box;
width: 90%;
margin: 0 auto;
text-align: center;
font-weight: 600;
color: #4f51b1;
}
/* file: script.js */
// Function to convert decimal number to Roman numeral
const inputField = document.getElementById('number');
const outputField = document.getElementById('output');
const convertButton = document.getElementById('convert-btn');
function convertToRoman() {
let arabic = inputField.value;
let roman = '';
if (arabic === '') {
outputField.innerHTML = 'Please enter a valid number.';
} else if (arabic < 0) {
outputField.innerHTML = 'Please enter a number greater than or equal to 1.';
} else if (arabic > 3999) {
outputField.innerHTML = 'Please enter a number less than or equal to 3999.';
} else {
// Rest of the conversion logic
const arabicArray = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1];
const romanArray = [
'M',
'CM',
'D',
'CD',
'C',
'XC',
'L',
'XL',
'X',
'IX',
'V',
'IV',
'I',
];
for (let i = 0; i < arabicArray.length; i++) {
while (arabicArray[i] <= arabic) {
roman += romanArray[i];
arabic -= arabicArray[i];
}
}
outputField.innerHTML = roman;
}
}
// Rest and Reload the page
function resetResult() {
inputField.value = ''; // Clear the input field
outputField.innerHTML = ''; // Clear the result
location.reload(); // Reload the page
}
Your browser information:
User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:121.0) Gecko/20100101 Firefox/121.0
Challenge Information:
Build a Roman Numeral Converter Project - Build a Roman Numeral Converter
