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

JavaScript
1

Tell us what’s happening:

Is my logic okay or should i make it shorter in any way? The logic goes like this.
First i check if the user input is greater or equal than 1000 and if it is on an array i add “M” then i subtract the user input with 1000. After that i check if the result (user input - 1000) is greater or equal than 900 and if it is i add “CM” to the array and i subtract 900 from the number, and so on until the number is 0. The thing is that there are too much if/else. Is it okay or should i find another way?

Your code so far

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="styles.css">
      <!-- Fonts -->
  <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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
</head>
<body>
  <main class="main-container">

    <h1 id="title">Roman Numeral Converter</h1>

    <div id="input-div">
      <p>Enter number</p>
      <input id="userNumber" type="number">
    </div>

  <div id="output" class="hidden">
    <div id="result-div">
      <p>Converted Number</p>
      <input id="result" type="number">
    </div>
  </div>

    <button id="convert-btn">
      Convert
    </button>

  </main>
  <script src="script.js"></script>
</body>
</html>


const userInput = document.getElementById("userNumber");
const outputContainer = document.getElementById("output");
const button = document.getElementById("convert-btn");

function convertToRomanNumber() {
  let num = userInput.value;
  const romanNum = [];

for(let i = num; i >= 0; i--){
  if(num >= 1000) {
    num -= 1000;
    romanNum.push("M");
  }else if(num >= 900) {
    num -= 900;
    romanNum.push("CM")
  }else if(num >= 500) {
    num -= 500;
    romanNum.push("D");
  }else if(num >= 400){
    num -= 400;
    romanNum.push("CD");
  }else if(num >= 100) {
    num -= 100;
    romanNum.push("C");
  }else if(num >= 90) {
    num -= 90;
    romanNum.push("XC");
  }else if(num >= 50) {
    num -= 50;
    romanNum.push("L");
  }else if(num >= 40) {
    num -= 40;
    romanNum.push("XL");
  }else if(num >= 10) {
    num -= 10;
    romanNum.push("X");
  }else if(num >= 9) {
    num -= 9;
    romanNum.push("IX");
  }else if(num >= 5) {
    num -= 5;
    romanNum.push("V");
  }else if(num >=4) {
    num -= 4;
    romanNum.push("IV");
  }else if(num >= 1) {
    num -= 1;
    romanNum.push("I")
  }else {
    console.log(romanNum);
    return;
  }
}
}

button.addEventListener("click", () => {
  if(userInput.value === "") {
    alert("Please enter a valid number");
  }else if(userInput.value <= 0){
    alert("Please enter a number greater than or equal to 1")
  }else if(userInput.value >= 4000){
    alert("Please enter a number less than or equal to 3999")
  }else{
   convertToRomanNumber()
  }
});
























  // const romanToNumber = [
  //   ["M", 1000],
  //   ["CM", 900],
  //   ["D", 500],
  //   ["CD", 400],
  //   ["C", 100],
  //   ["XC", 90],
  //   ["L", 50],
  //   ["XL", 40],
  //   ["X", 10],
  //   ["IX", 9],
  //   ["V", 5],
  //   ["IV", 4],
  //   ["I", 1]
  // ];


html {
  margin: 0px;
  padding: 0px;
}

body {
  font-family: Poppins;
  /* 
  #719cd4
  #a49a94
  #af8c6b
  #b29e8c
  #542c14
  */  
  background-color: #2D2424
}

.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

#title {
  margin: 0px;
  margin-bottom: 40px;
  color: #B85C38;
}

#input-div {
  display: flex;
  align-items: center;
  flex-direction: column;
}

#input-div p {
  margin-top: 0px;
  margin-bottom: 5px;
  font-size: 25px;
  color: #B85C38;}

#userNumber {
  width: 230px;
  height: 45px;
  font-size: 30px;
  text-align: center;
  background-color: #5C3D2E;
  color: #E0C097;
  border: 1px solid white;
  border-radius: 5px;
  transition: 0.3s
}

#userNumber:hover, #number:focus{
  border-radius: 15px;
}

/* Result */

#result-div {
  display: flex;
  align-items: center;
  flex-direction: column;
}

#result-div p {
  margin-bottom: 5px;
  font-size: 25px;
  color: #B85C38;
}

#result {
  width: 230px;
  height: 45px;
  font-size: 30px;
  text-align: center;
  background-color: #5C3D2E;
  color: #E0C097;
  border: 1px solid white;
  border-radius: 5px;
  transition: 0.3s;
}

#result:hover, #result:focus{
  border-radius: 15px;
}

#convert-btn {
  margin-top: 35px;
  width: 150px;
  height: 35px;
  background-color: #5C3D2E;
  border: none;
  border-radius: 7px;
  transition: 0.3s;
}

#convert-btn:hover {
  border-radius: 15px;
  box-shadow: 0px 0px 5px white ;
  color: white;
  background-color: #603D2E
}

/* Hidden */

.hidden{
  display: none;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Challenge Information:

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

2

If it passes the tests then it’s ok and you should move on to the next thing

1 Like
3

It just looks too easy to do it this way. Thats why I’m asking. Is it normal to write the code as a complete beginner?