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

JavaScript
1

Tell us what’s happening:

In the “decimalToRoman” function , I’m writing three if statements for 1,9 and 1000. I tried to modify the “myArrIndex” function to find an index of the matching input but hitting an error every time. when input is greater, without the conditions(for 9 and 1000, without if for 1 nothing works), it works but shows a different output when the input matches the number.

For Example:
Without if ,for 9 => VIIII, for 1000 => CMXCIXI, which is not desired.
And with if, for 9 => I, for 1000 => M.

Can anybody help?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Roman Numeral Converter</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Roman Numeral Converter</h1>
<div class="input-container">
<label for="number">Enter a decimal number:</label>
<input id="number" value="" type="number" class="number" name="decimal number input" />
<button id="convert-btn" class="convert-btn">Convert</button>
</div>
<div id="output" class="output"></div>

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

/* file: styles.css */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root{
  --light-grey: #f5f6f7;
  --dark-blue: #1b1b32;
  --orange: #f1be32;
}

body{
  background-color: var(--dark-blue);
  font-family: "Times New Roman", Times, serif;
  font-size: 18px;
  color: var(--light-grey);
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1{
  text-align: center;
  font-size: 2.3rem;
  margin: 20px 0;
}

.input-container{
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.convert-btn{
  background-color: var(--orange);
  cursor: pointer;
  border: none;
  padding: 4px;
}

.number{
  height: 25px; 
}

.output{
  margin: 10px 0;
  min-width: 200px;
  min-height: 80px;
  width: fit-width;
  word-break: break-word;
  padding: 15px;
  text-align: center;
  border: 5px solid var(--orange);
  font-size: 2rem
}

@media screen and (min-width: 500px){
  .input-container{
    flex-direction: row;
  }

  .output{
    max-width: 460px;
  }
}



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


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

const decimalToRoman = (input) => {

  if (input == 1) {
    return "I";
  } else if (input == 9) {
    return "IX";
  } else if (input == 1000) {
    return "M";
  }

  const myArrIndex = myArr.findIndex(
    (obj) => input > obj.dNum
  );

  return myArr[myArrIndex].rNum + decimalToRoman(input - myArr[myArrIndex].dNum);

};



const checkUserInput = () => {

  const inputInt = numberInput.value;

  if (!inputInt) {
    output.textContent = "Please enter a valid number";
    return;
  } else if (inputInt < 1) {
    output.textContent = "Please enter a number greater than or equal to 1";
    return;
  } else if (inputInt > 3999) {
    output.textContent = "Please enter a number less than or equal to 3999";
    return;
  }

  output.textContent = decimalToRoman(inputInt);

};

convertBtn.addEventListener("click", checkUserInput);
numberInput.addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
    checkUserInput();
  }
})

Your browser information:

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

Challenge Information:

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

2

it looks like you have a recursive algorithm. Have you tried to add logs to it to see how it behaves at each step?

For the number 9, what logs do you get?
What is your explanation of these logs?

3

Without if ,for 9 => VIIII, for 1000 => CMXCIXI.

it’s due to this function ;
const myArrIndex = myArr.findIndex(
(obj) => input > obj.dNum
);

when I log 9, it finds index with number less than 9 and recursive loop response is
5,1,1,1,1 and converts to VIIII.

Also for 4, it’s same case. It prints IIII instead of IV.

I tried to use “(obj) => input >= obj.dNum” to find match , but in that case, throwing error when if statements are disabled.

4

This is happening why though?

What I am wondering is, when you see this log, does this trigger something to make you think: maybe my algorithm is not complete or correct?

Your code is working as you wrote it. If you want something different, what is it that you want? You need to bridge the gap between what you wrote and what you want.

5

What is the error?
(You need to deal with the error if this statement is important to your solution)

Edit: remember that .value always returns a string.

6

image
image948×280 14.5 KB

Yeah I know, that’s why I didn’t use strict equality operators. Thanks though. In fact I wasn’t reading the error properly., that’s why got stuck.

On the very last log loop was finding index -1 and wasn’t able to read. But now it’s working without those statements. Thanks for the help.

1 Like