Build a Roman Numeral Converter Project - Build a Roman Numeral Converter

Tell us what’s happening:

Everything passes except in the case where input is an empty string. It console logs to 0 so the empty string case doesn’t apply. ~Que?~

Your code so far

<!-- file: index.html -->

<html lang=en>
  <meta charset =utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1" /> 

  <link rel="stylesheet" type="text/css" href="styles.css" />
  <body>
    <input id="number" placeholder="Enter a number"></input>
   <div id="space"></div> 
    <button id="convert-btn">Convert</button>
    <div id="space"></div> 
    <div id="output"></div>
    <script src="script.js"></script>

  </body>
</html>
/* file: styles.css */
#number{
  width: 200px;
  height: 50px;
  background-color: blue;
  color: white
 
}

#space{
  height: 10px;
  background-color: white;
 
}

#convert-btn{
  width: 200px;
  height: 50px;
  background-color: green;
  color: white
}

#output{
  margin-top: 10px;
  background: white;
  display: block;
  border-top: solid black;
  border-bottom: solid black;
  border-left: solid black;
  border-right: solid black;
  padding: 10px 50px 30px 0;
}
/* file: script.js */
const num = document.getElementById("number")
const convertBtn = document.getElementById("convert-btn")
const output = document.getElementById("output")
const numerals = {
    1000: "M",
    900: "CM",
    500: "D",
    400: "CD",
    100: "C",
    90: "XC",
    50: "L",
    40: "XL",
    10: "X",
    9: "IX",
    5: "V",
    4: "IV",
    1: "I"
}

const keys = Object.keys(numerals).reverse()

function convertToRoman(input) {
  let answer = "";

     if (input > 3999){
      output.innerText = "Please enter a number less than or equal to 3999"
    }

    else if (1 > input){
    output.innerText = "Please enter a number greater than or equal to 1"}

    else if (input === ""){
      output.innerText = "Please enter a valid number"
    }

    else{

  while (input > 0) {
    let modified_in_this_loop_already = false;

    keys.forEach((key) => {
      if (input >= key && !modified_in_this_loop_already) {
        input -= key;
        answer += numerals[key];
        modified_in_this_loop_already = true;
      }
    })
  }
  output.innerText = answer
  }
}


convertBtn.addEventListener("click", () => {
  convertToRoman(Number(num.value))
  })

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36

Challenge Information:

Build a Roman Numeral Converter Project - Build a Roman Numeral Converter

console.log(Number('')) // 0

See an issue?

1 Like

Thanks! I moved the number conversion into the function after first checking if input is an empty string and it now passes :slight_smile: