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

JavaScript
1

Why it didn’t work

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 Conventer</title>
  </head>
  <body>
      <h2>RNC</h2>
      <h1>Enter a Number</h1>
      <input id="number" class="ipt"></input>
      <p>
        <button id="convert-btn" class="btnn">Let's get a Number</button>
      </p>
      <div id="output" class="dvv"></div>
<script src="script.js"></script>
  </body>
  </html>

/* file: styles.css */
h3 {
  text-align: center;
  font-size: 35px;
  color: #00FFFF;
}
body {
  background-color: #2e2d2d;
}
h1, h2 {
  text-align: center;
  background-color: #4b586b;
  border-radius: 17px;
  color: #00BFFF;
}
.btnn {
  font-weight: bold;
  width: 160px;
  height: 26px;
  border-radius: 7px;
  text-align: center;
  color: #4169E1;
}
h2 {
  color: #1E90FF;
}
.ipt {
  font-weight: bold;
  text-align: center;
  color: #4169E1;
}
.dvv {
  font-weight: bold;
  text-align: center;
  color: #DC123C;
  background-color: #FF7F50;
  border-radius: 9px;
}


/* file: script.js */
const input = document.getElementById('number');
const getBtn = document.getElementById('convert-btn');
const outIst = document.getElementById('output');

const plsEnter = () => {
  const inputT = input.value
  if (inputT === '') {
    outIst.innerText = 'Please enter a valid number'
    return;
  }
   else if  
   (inputT < 1) {
  outIst.innerText = 'Please enter a number greater than or equal to 1'
  return;
  } else if 
  (inputT > 3999) { 
  outIst.innerText = 'Please enter a number less than or equal to 3999'
  return;
   } else {
     numCheker()
     return;
   }
  }

const numCheker = () => {
  const n = input.value;
  const oblZnack = [
     {
       1: 'I',
       4: 'IV',
       5: 'V',
       9: 'IX',
       10: 'X',
       40: 'XL',
       50: 'L',
       90: 'XC',
       100: 'C',
       400: 'CD',
       500: 'D',
       900: 'CM',
       1000: 'M',
     }
  ];
    if (n = oblZnack) {
      outIst.innerText = `${oblZnack}`;
      while(n < oblZnack);     
    }
} 

  getBtn.addEventListener('click', plsEnter)

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

What error message are you getting? Looking carefully at the exact wording of the error message can often help.

3

I haven’t error. it just don’t work. What can i change?

4

I think you have a problem in this line:

5

No, my plsEnter function work great. And numCheker don’t…

6

Hi ,i’m working on the same project now
can you explain how this code works

if (n = oblZnack) {
      outIst.innerText = `${oblZnack}`;
      while(n < oblZnack);     
    }

how can ‘n’ or user’s input be assigned to a whole array oblznack as a condition, and why while loop doesn’t have a body, in other word what javascript have to do while that condition is true

7

thx, that was real shit. I corrected my code:
const numCheker = () => {

const n = Number(input);
const vivodock = “”;
const pluss = 0;
const oblZnack =
{
1: ‘I’,
4: ‘IV’,
5: ‘V’,
9: ‘IX’,
10: ‘X’,
40: ‘XL’,
50: ‘L’,
90: ‘XC’,
100: ‘C’,
400: ‘CD’,
500: ‘D’,
900: ‘CM’,
1000: ‘M’,
};
const civr = [100, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1];

 while(n > 0) {
if (civr[pluss] > n) {
  pluss++;

} else {
n -= civr[pluss];
vivodock += oblZnack[civr];
}
}
return outIst.innerHTML = `

${vivodock}
`; }

getBtn.addEventListener(‘click’, plsEnter);

what you say about this?

8

I don’t really understand what you’re trying to do here but you don’t have any code after the while statement

9 
while(n > 0) {
if (civr[pluss] > n) {
  pluss++;

if you already prevent the user from entering values less that 1 .then the condition (n > 0) is always true.
your if statement have no return, i understand you’re trying to loop through the array civr but you can use foreach() method for that …the first item with the index[0] should be 1000 not 100

function convert() {
  const translator = {
    1: "I",
    4: "IV",
    5: "V",
    9: "IX",
    10: "X",
    40: "XL",
    50: "L",
    90: "XC",
    100: "C",
    400: "CD",
    500: "D",
    900: "CM",
    1000: "M"
  };
  console.log(translator[input.value]);

}

start from here.

10

It seems there are several issues in your JavaScript code:

  1. In the numCheker() function, you’re trying to compare n with oblZnack, but this comparison if (n = oblZnack) is assigning oblZnack to n. You should use == or === for comparison.
  2. Your oblZnack array is nested within another array unnecessarily. Remove the outer array brackets.
  3. In the numCheker() function, you’re trying to loop using while(n < oblZnack), but it seems unclear what you’re trying to achieve here. This loop structure is incorrect and doesn’t make sense in the context.

const input = document.getElementById(‘number’);
const getBtn = document.getElementById(‘convert-btn’);
const outIst = document.getElementById(‘output’);

const plsEnter = () => {
const inputT = input.value
if (inputT === ‘’) {
outIst.innerText = ‘Please enter a valid number’
return;
}
else if (inputT < 1) {
outIst.innerText = ‘Please enter a number greater than or equal to 1’
return;
} else if (inputT > 3999) {
outIst.innerText = ‘Please enter a number less than or equal to 3999’
return;
} else {
numCheker(inputT);
return;
}
}

const numCheker = (n) => {
const oblZnack = {
1: ‘I’,
4: ‘IV’,
5: ‘V’,
9: ‘IX’,
10: ‘X’,
40: ‘XL’,
50: ‘L’,
90: ‘XC’,
100: ‘C’,
400: ‘CD’,
500: ‘D’,
900: ‘CM’,
1000: ‘M’,
};

if (oblZnack[n]) {
outIst.innerText = oblZnack[n];
}
}

getBtn.addEventListener(‘click’, plsEnter);

In this revised version, I’ve corrected the comparison in the numCheker() function, removed the unnecessary nesting of oblZnack, and removed the incorrect while loop.

i hope it will work for you not 100% but solve some issues

11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.