<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <link href="romanNum.css" rel="stylesheet">

  <link href="https://fonts.googleapis.com/css?family=Ubuntu+Condensed&display=swap" rel="stylesheet">
</head>
<body>
  <div id="container">
      <h1>Roman Numeral Converter</h1>
      <p>Put in a number between 1 and 3,999 click convert to get the Roman numaral version.</p>
      <form>
           <h2>Number to Convert: </h2>
           <input type="text" class="fillBox" id="convertNum" maxlength="4" size="20" placeholder="# between 1 and 3,999">
         </br>
           <button type="button" id="convert">Convert</button>
    </form>
    <div id="error">
      <span id="error"></span>
    </div>
    <div id="converted">
      <span id="romanNum"></span>
    </div>
</div>
</body>
<script type="text/javascript" src="romanNum.js"> </script>
</html>
html {
  background-color: #CCC;
  font-family: 'Ubuntu Condensed', sans-serif;
  font-size: 18px;
}

p{
  font-size: 1em;
  padding: 5px 15px;
  text-align: center;
}
H1 {
  text-align: center;
  color: white;
  background-color: #990000;
  padding: 5px;
  border-radius: 25px 25px 0px 0px;
}
H2 {
  font-size: 1.2em;
  padding-top: 10px;
  margin: 0px;
}

#container {
  background-color: #fff;
  width: 450px;
  height: 400px;
  border-radius: 25px;
  margin: auto;
}

form{
  text-align: center;
  font-size: 1.5em;
}
button {
  font-size: 25px;
  display: block;
  margin: 30px auto;
  border-radius: 25px;
  color: white;
  background-color: #990000;
}
input{
  padding: 2px;
}
#converted {
  font-size: 1.2em;
  margin-top: 5px;
  text-align: center;
  margin: auto;
  width: 190px;
}

#romanNum{
  font-size: 2em;
}
#error{
  text-align: center;
  font-size: 1.1em;
  color: red;
  font-weight: bold;
}
//Hide the converted area on load
document.getElementById("error").style.display = "none";


//click to call function
document.getElementById("convert").onclick = function() {
  let num = parseInt(document.getElementById("convertNum").value);
  // console.log(num);
  if (num > 3999 || isNaN(num)){
    document.getElementById("error").style.display = "block";
    document.getElementById("error").innerHTML = "Please select number between 1 and 3999";
  } else {
    document.getElementById("error").style.display = "none";
  convertToRoman(num);
}
};

let RomanNum = "";
let ones = "I";
let fives = "V";
let tens = "X";
let fifties = "L";
let hundreds = "C";
let fiveHundreds = "D";
let thousands = "M";
 let romanNumReturn = "";

//---MAIN FUNCTION
function convertToRoman(num) {
    // console.log("num is: ", num);
let newNum = makeNumFourDigits(num);
// let one, ten = "";
let strNum = newNum.toString().split("");
// console.log("strNum is: ", strNum)


let one = convertOnes(strNum[3])
let ten = convertTens(strNum[2])
let hundred = convertHundreds(strNum[1])
let thousand = convertThousands(strNum[0])
function convertOnes(one) {
  if (one == 9){
    return "IX";
  } else if (one == 5){
    return "V";
   } else if (one > 5){
    return fives + (ones.repeat(parseInt(one) - 5));
  } else if (one == 4){
    return "IV";
  } else if (one ==0){
    return "";
  } else {
        // console.log("one is: ", one);
    return (ones.repeat(parseInt(one)));
  }
}
function convertTens(ten) {
  if (ten == 9){
    return "XC";
  } else if (ten == 1){
    return "X";
  } else if (ten == 5){
  return fifties;
   } else if (ten > 5){
    return fifties + (tens.repeat(parseInt(ten) - 5));
  } else if (ten == 4){
    return "XL";
  } else if (ten ==0){
    return "";
  } else {
    return (tens.repeat(parseInt(ten)));
  }
}
function convertHundreds(hundred) {
  if (hundred == 9){
    if (strNum[1] == 0){
    return "XC";}
    else {
      return "CM"
    }
  } else if (hundred == 1){
    return "C";
    } else if (hundred == 5){
    return fiveHundreds;
   } else if (hundred > 5){
    return fiveHundreds + (hundreds.repeat(parseInt(hundred) - 5));
  } else if (hundred == 4){
    return "CD";
  } else if (hundred ==0){
    return "";
  } else {
    return (hundreds.repeat(parseInt(hundred)));
  }
}
function convertThousands(thousand) {
  if (thousand == 9){
    return "CM";
  } else if (thousand == 1){
    return "M";
    } else if (thousand == 5){
    return fiveHundreds;
   } else if (thousand > 5){
    return fiveHundreds + (hundreds.repeat(parseInt(thousand) - 5));
  } else if (thousand == 4){
    return "CD";
  } else if (thousand ==0){
    return "";
  } else {
    return (thousands.repeat(parseInt(thousand)));
  }
}
console.log(thousand + hundred + ten + one);
romanNumReturn =  thousand + hundred + ten + one;
document.getElementById("romanNum").innerHTML = romanNumReturn;
}

function makeNumFourDigits(newNum){
  if (newNum <= 9){
     return "000" + newNum;
  } else if (newNum <= 99){
    return "00" + newNum;
  } else if (newNum <= 999){
    return "0" + newNum;
  } else {
    console.log(newNum);
     return newNum;}
}
// document.getElementById("converted").style.display = "visable";
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.