I was taking a FreeCodeCamp project for JavaScript where I had to make a roman numerical converter, but unfortunately I have a couple issues:
- Some CSS codes do not load such as margin colors and the background linear-gradient color.
- The container that has the expected result that i want to make invisible at first and then invisible after the user input doesn’t work as intended.
I think i made a big logical mistake but I just can’t seem to find it.
Thank you for taking your time reviewing my code, English isn’t my native language so I hope I made myself clear.
Here is all my code so far:
const numberInput = document.getElementById("input");
const convertButton = document.getElementById("convert");
const output = document.getElementById("result");
const romanNumbers = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1];
const romanLetters = ["M", "CM", "D", "CD", "C", "XC", "L", "XL", "X", "IX", "V", "IV", "I"];
function convertToRoman(number) {
if (number === 0) {
output.textContent = "Roman numerals do not represent zero.";
return;
}
if (isNaN(number) || number < 1 || number > 3999) {
const errorMessage = number < 1 ? "Please enter a number greater than or equal to 1." :
number > 3999 ? "Please enter a number less than or equal to 3999." :
"Please enter a valid number.";
output.textContent = errorMessage;
return;
}
let roman = "";
for (let i = 0; i < romanNumbers.length; i++) {
while (number >= romanNumbers[i]) {
roman += romanLetters[i];
number -= romanNumbers[i];
}
}
output.textContent = roman;
output.parentElement.style.visibility = "visible";
}
convertButton.addEventListener("click", function(event) {
event.preventDefault(); // Prevent form submission (optional)
const enteredNumber = parseInt(numberInput.value);
convertToRoman(enteredNumber);
// Clear previous output on new conversion (optional):
// output.textContent = ""; // Uncomment if you prefer to clear the output
});
html {
height: 100%;
width: 100%;
}
body {
margin: 0;
padding: 0;
font-family: Rubik, Robot, open sans, sans-serif;
background-color: linear-gradient(to top right, #00AAFF, #00FF6C);
}
.container {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px solid black;
padding: 10px;
border-radius: 10px;
}
#numberForm {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.hidden {
visibility: invisible;
}
<div class="container">
<h1>Roman Numeral Converter</h1>
<h3>Made by Yazzine</h3>
</div>
<div class="container">
<form id="numberForm">
<p>Enter a number between 1 and 3999:</p>
<div>
<input type="number" id="input" placeholder="Your number">
<button type="submit" id="convert">Convert</button>
</div>
</form>
</div>
<div class="container hidden" id="result-container">
<p>Roman Numeral: <span id="result"></span></p>
</div>
2
Answers
The first problem, the
div
containing the output being visible on page load, is becauseinvisible
isn’t a valid setting forvisibility
. You should usehidden
instead.The other issue, with the linear gradient not being shown on the
body
, is becauselinear-gradient()
needs to be set on thebackground
, not thebackground-color
.Finally, you cannot set a colour on a
margin
, only a width. I would presume you want to set aborder-color
instead.With those issues corrected, your code works fine:
Note for future reference, if you ever encounter anything you’re not sure about regarding CSS, MDN is the best reference resource. It will provide full documentation for all properties as well as examples of usage.
To answer your first problem
invisible not a valid value in css property visibility