Tell us what’s happening: from step 7 whatever I do it either allows the first few steps and the las ones it doesnt, or vice versa
Describe your issue in detail here.
Your code so far
<!-- file: index.html -->
<!-- file: index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
<link rel="scriptsheet" href="./script.js" />
<title>Roman Numeral Converter</title>
</head>
<body>
<label for="number">Enter Numbers: </label>
<input id="number"></input>
<button id="convert-btn">convert</button>
<div id="output"></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 */
let number = document.getElementById("number");
let btn = document.getElementById("convert-btn");
let result = document.getElementById("output");
btn.addEventListener("click", numberInput);
function numberInput(){
if(number.value === ''){
result.textContent="Please enter a valid number";
}
else if (number.value < 1){
result.textContent="Please enter a number greater than or equal to 1";
}
else if (number.value >=4000){
result.textContent="Please enter a number less than or equal to 3999";
}
else if (number.value < 4000) {
result.textContent = "Roman Numeral:" + convertToRoman(number.value);
}
function convertToRoman(num) {
let romanNumeral = '';
let romanList = [
['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],
]
let keys = Object.keys(romanList);
console.log(keys);
while (num > 0) {
let letter = "I"
for (let i = 0; i < keys.length; i++) {
if (num >= romanList[keys[i]]) {
letter = keys[i];
break;
}
}
romanNumeral += letter;
num = num - romanList[letter];
}
return answer;
}
}
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 OPR/107.0.0.0
Challenge Information:
Build a Roman Numeral Converter Project - Build a Roman Numeral Converter