Tell us what’s happening:
My code does not pass tests 7-8-9-10 and 11. but in the app it works, I don’t understand why it doesn’t pass the tests. I’ve been working on this for a week and the application works for all those numbers but it doesn’t pass the test. I didn’t want to ask for help but I need it, there’s something I’m not seeing. thank you all
Your code so far
<!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">
<link rel="shortcut icon" href="images/hombre (1).png" type="image/x-icon">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Bitter:ital,wght@0,100..900;1,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Orbitron:wght@400..900&display=swap"
rel="stylesheet">
<title>Build a Roman Numeral Converter</title>
</head>
<body>
<form class="machine">
<p class="title">Roman numerals converter</p>
<input type="number" id="number" class="viewfinder"></input>
<div class="keyboard">
<div class="num-buttons num1">1</div>
<div class="num-buttons num2">2</div>
<div class="num-buttons num3">3</div>
<div class="num-buttons num4">4</div>
<div class="num-buttons num5">5</div>
<div class="num-buttons num6">6</div>
<div class="num-buttons num7">7</div>
<div class="num-buttons num8">8</div>
<div class="num-buttons num9">9</div>
<div class="num-buttons num0">0</div>
</div>
<div class="result">
<div class="buttons-result">
<button type="reset" value="Reset" class="button-result">Reset</button>
<button type="submit" id="convert-btn" class="button-result c">Convert</button>
</div>
<p class="show-result">Show Result</p>
<div id="output" class="viewfinder"></div>
</div>
</form>
<script src="script.js"></script>
</body>
</html>
const str = document.querySelector("#number");
const resetBTn = document.querySelector(".button-result");
const convertBtn = document.querySelector("#convert-btn");
const output = document.querySelector("#output");
const num1 = document.querySelector(".num1");
const num2 = document.querySelector(".num2");
const num3 = document.querySelector(".num3");
const num4 = document.querySelector(".num4");
const num5 = document.querySelector(".num5");
const num6 = document.querySelector(".num6");
const num7 = document.querySelector(".num7");
const num8 = document.querySelector(".num8");
const num9 = document.querySelector(".num9");
const num0 = document.querySelector(".num0");
num1.addEventListener("click", () => {
str.value += 1;
});
num2.addEventListener("click", () => {
str.value += 2;
});
num3.addEventListener("click", () => {
str.value += 3;
});
num4.addEventListener("click", () => {
str.value += 4;
});
num5.addEventListener("click", () => {
str.value += 5;
});
num6.addEventListener("click", () => {
str.value += 6;
});
num7.addEventListener("click", () => {
str.value += 7;
});
num8.addEventListener("click", () => {
str.value += 8;
});
num9.addEventListener("click", () => {
str.value += 9;
});
num0.addEventListener("click", () => {
str.value += 0;
});
resetBTn.addEventListener("click", () => {
output.textContent = "";
return;
});
const valEntry = (e) => {
e.preventDefault();
if (str.value.length == 0) {
return (output.textContent = "Please enter a valid number");
} else if (str.value <= 0) {
return (output.textContent =
"Please enter a number greater than or equal to 1");
} else if (str.value >= 4000) {
return (output.textContent =
"Please enter a number less than or equal to 3999");
}
};
const roman = {
1: "I",
5: "V",
10: "X",
50: "L",
100: "C",
500: "D",
1000: "M",
};
const millar = (num) => {
num = entrada[3];
if (entrada[3] >= 0 && entrada[3] <= 3) {
output.textContent = roman[1000].repeat(entrada[3]);
} else if (entrada[3] >= 4) {
output.textContent = "Please enter a number less than or equal to 3999";
}
return output.textContent;
};
const centenas = (num) => {
num = entrada[2];
if (entrada[2] >= 0 && entrada[2] <= 3) {
output.textContent = roman[100].repeat(entrada[2]);
} else if (entrada[2] == 4) {
output.textContent = roman[100].concat(roman[500]);
} else if (entrada[2] >= 5 && entrada[2] <= 8) {
output.textContent = roman[500].concat(roman[100].repeat(entrada[2] - 5));
} else if (entrada[2] == 9) {
output.textContent = roman[100].concat(roman[1000]);
}
return output.textContent;
};
const decenas = (num) => {
num = entrada[1];
if (entrada[1] >= 0 && entrada[1] <= 3) {
output.textContent = roman[10].repeat(entrada[1]);
} else if (entrada[1] == 4) {
output.textContent = roman[10].concat(roman[50]);
} else if (entrada[1] >= 5 && entrada[1] <= 8) {
output.textContent = roman[50].concat(roman[10].repeat(entrada[1] - 5));
} else if (entrada[1] == 9) {
output.textContent = roman[10].concat(roman[100]);
}
return output.textContent;
};
const unidades = (num) => {
num = entrada[0];
if (entrada[0] >= 0 && entrada[0] <= 3) {
output.textContent = roman[1].repeat(entrada[0]);
} else if (entrada[0] == 4) {
output.textContent = roman[1].concat(roman[5]);
} else if (entrada[0] >= 5 && entrada[0] <= 8) {
output.textContent = roman[5].concat(roman[1].repeat(entrada[0] - 5));
} else if (entrada[0] == 9) {
output.textContent = roman[1].concat(roman[10]);
}
return output.textContent;
};
let inputInt;
let entrada;
const convert = () => {
inputInt = Array.from(String(str.value), Number);
entrada = inputInt.reverse();
output.textContent =
`"${millar()}` + `${centenas()}` + `${decenas()}` + `${unidades()}"`;
};
convertBtn.addEventListener("click", convert);
convertBtn.addEventListener("click", valEntry);file: script.js */
file: styles.css */
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