Css colors not loaded and touble making a div visible and invisible

February 27, 2024

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>

>Solution :

The first problem, the div containing the output being visible on page load, is because invisible isn’t a valid setting for visibility. You should use hidden instead.

The other issue, with the linear gradient not being shown on the body, is because linear-gradient() needs to be set on the background, not the background-color.

Finally, you cannot set a colour on a margin, only a width. I would presume you want to set a border-color instead.

With those issues corrected, your code works fine:

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: linear-gradient(to top right, #00AAFF, #00FF6C);
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px;
  padding: 10px;
  border-radius: 10px;
}

#numberForm {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.hidden {
  visibility: hidden;
}

<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>

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.