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

JavaScript
1

Tell us what’s happening:

I have rewritten this test for the second time now, I learned a lot about how to shorten it and how to make good use of loops. Both times my entire code worked. The problems it tells me my code has is when I enter the numbers 16, 649, 1023 and 3999. But my code gives me the right answers for all four of them, so I don’t really know what I’m doing/coding wrong.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./styles.css">
    <title>Roman Numeral Converter</title>
  </head>
  <body>
    <div id="div1">
      <h1>Roman Numeral <br/> Converter</h1>
    </div>
    <div id="div2">
      <p id="text">Enter a number:</p>
      <input id="number" type="number"><br/>
      <button id="convert-btn">Convert</button>
    </div>
    <div id="output" class="div3">Output</div>
    <script src="./script.js"></script>
  </body>
</html>

/* file: styles.css */
body{
  font-family: 'Arial', sans-serif;
  background-color: #4B5320;
  color: white;
  text-align: center;
  
}

div{
  width: 500px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 5px;
}

h1{
  margin-top: 70px;
  margin-bottom: 35px;
  font-size: 40px;
}

#div2{
  height: 180px;
  border-style: solid;
  background-color: #8F9779;
  font-weight: bold;
  font-size: 25px;
  padding-bottom: 15px;
  margin-bottom: 25px;
}
.div3{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  border-style: solid;
  background-color: #8F9779;
  font-weight: bold;
  font-size: 25px;
  
}

#number{
  padding-left: 15px;
  width: 380px;
  font-size: 32px;
  border-radius: 5px;
  border-style: none;
  margin-bottom: 15px;
}

#convert-btn{
  width: 399px;
  height: 40px;
  font-size: 20px;
  border-radius: 5px;
  border-style: none;
  margin-bottom: 25px;
}

/* file: script.js */
const number = document.getElementById("number");
const convertBtn = document.getElementById("convert-btn");
const output = document.querySelector("#output");

const convertToRoman =(input)=>{
  if (input === ""){
    output.innerText = "Please enter a valid number";
  }else if(input >= 4000){
    output.innerText = "Please enter a number less than or equal to 3999";
  }else if(input <=0){
    output.innerText = "Please enter a number greater than or equal to 1";
  }else if(0<input<4000){
    makeRoman(input);
    const result = outputArray.join("");
    output.innerText = result;
  }
}

let outputArray=[];
const romanLettersArray = ["I","X","C","M"];
const romanLettersArray5=["V","L","D"];

const romanCalculation = (int)=>{
  const one = romanLettersArray[int];
  const two = one+romanLettersArray[int];
  const three = two+romanLettersArray[int];
  const four = one + romanLettersArray5[int];
  const five = romanLettersArray5[int];
  const six = five + one;
  const seven = five + two;
  const eight = five + three;
  const zero = romanLettersArray[int+1];
  const nine = one + zero;

  const romanCalculator = ["", one, two, three, four, five, six, seven, eight, nine];
  return romanCalculator;
}


const makeRoman=(input)=>{
  const reversedInput = input.split("").reverse();
  for(let i=0; i<=number.value.length-1; i++){
    const romanNumbersSpecific = romanCalculation(i);
    outputArray.unshift(romanNumbersSpecific[reversedInput[i]]);
  }
}

const checkUserInput = () => {
 if (number.value < 0) {
   output.innerText = "Please enter a number greater than or equal to 1";
    return;
 }
  convertToRoman(number.value);
};

convertBtn.addEventListener("click", checkUserInput);

number.addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
    checkUserInput();
  }
  outputArray=[];
}
);

Your browser information:

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

Challenge Information:

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

2

Welcome to the forum @remmalhassan

When I press the Convert button several times in a row:

image
image248×225 4.77 KB

Happy coding

3

oh thank you, I’ll get right into fixing that :grin: