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

JavaScript
1

Tell us what’s happening:

I am confused on why my code isn’t passing. The error message happens when I get a number less than -1 or more than 4000.

Your code so far

<!-- file: index.html -->
<!doctype HTML>

<head>
  <title>Roman Numeral</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  
  <h2 class="author">CybordGeneral</h2>
  <h1 class="title">Roman Numberals Convertor</h1>
  <div class="inner-box">
    <p>Enter a Number:</p>
    <input id = "number" class="input" type ="number"></input>
    <button id = "convert-btn">Convert</button>
  </div>
  <div id = "result">
  <p id = "output"></p>
  </div>
    <script src ="script.js"></script>
</body>

/* file: script.js */
const input = document.querySelector(".input")
const convert = document.querySelector("#convert-btn")
const romanNumberDisplay = document.querySelector("#output")

input.addEventListener("keydown",  (e)=>{
  if (e.key == "Enter"){

    input.value = Math.floor(input.value)
    if (input.value == "0"){ 
      romanNumberDisplay.textContent = "Please enter a valid number"

    }else if(input.value < 0){
      romanNumberDisplay.textContent = "Please enter a number greater than or equal to 1"
    }
    else if(input.value > 3999){
      romanNumberDisplay.textContent = "Please enter a number less than or equal to 3999"
    }else{
      console.log(input.value);
      numberChecker(input.value)
    }
  }
})

convert.addEventListener("click",()=>{
  console.log(input.value)
  numberChecker(input.value)

    input.value = Math.floor(input.value)
    if (input.value == "0" || input.value < 0){ 

      romanNumberDisplay.textContent = "Please enter a valid number"

    }else{
      console.log(input.value);
      numberChecker(input.value)
    }
    
  }
)

const romanNumberChart = [
  {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}
]

let letter = ``
let subtractor = 0
let placement = 0


const numbersubtractor = (placement) =>{
  letter = `${Object.keys(romanNumberChart[placement])}`
  subtractor = romanNumberChart[placement][letter]

  //.replace


  return console.log(subtractor, letter)

}

let romanNumber = ""

const numberChecker = (number) =>{
  placement = 0
  romanNumber = ""
  numbersubtractor(placement)
 
  while (number>=!0){ 
    if (number >= subtractor){
      number -= subtractor
      romanNumber += letter
      console.log(number)

    }else{
      placement++
      numbersubtractor(placement)
    }
  }
  romanNumberDisplay.textContent = romanNumber
  return
  
}


/* file: styles.css */


*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: Sans-serif, arial;
  transition: 0.2s;
  color: #970000
}
:root{
 --color1: #007900;
 --color2: #86D50E;
}

body{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #0CB90C;
  margin: auto 0;
  height: 100vh
}
.author{
  font-size: 35px;
  margin-bottom: 20px;
}
.title{
  font-size: 45px;
  margin-bottom: 20px;
  text-align: center;
}
.inner-box{
  background: var(--color2);
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
  padding: 30px;
  border-radius: 10px;
  border: var(--color1) 4px solid;
  width: 80vw;
  

}

.inner-box p{
  font-size: 20px;
  
}
.inner-box input{
  height: 50px;
  font-size: 30px;
  width: 67vw;
  margin: 20px 0
}

button{
  width: 67vw;
  height: 50px;
  font-size: 20px;
  border: var(--color1) solid 3px;
  border-radius: 5px;
  background: #6DAC02
}

button:hover{
  background: #3F6400
}

#output{
  font-size: 40px;
  
}

#result{
  margin-top: 20px;
  width: 80vw;
  height: auto;
  background: var(--color2);
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  border: var(--color1) 4px solid;
}


@media (max-width: 700px){

  .title{
    font-size: 30px
  }
}

Your browser information:

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

Challenge Information:

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

2

Hi cybordgeneral,

So here are a few things I noticed that you should try:

  1. You’re calling numberChecker() before checking if the number is within the valid range, so invalid values still get processed.
numberChecker(input.value);

Try this instead: Move the validation checks before calling numberChecker() to ensure only valid numbers are converted.

if (input.value < 1) {
  romanNumberDisplay.textContent = "Please enter a number greater than or equal to 1";
} else if (input.value > 3999) {
  romanNumberDisplay.textContent = "Please enter a number less than or equal to 3999";
} else {
  numberChecker(input.value);
}
  1. In while (number >= !0), the condition is incorrect because !0 is true, and you’re comparing a number to true.
while (number >= !0)

Try this: Use while (number > 0) to correctly loop while the number is positive.

while (number > 0) {
  // your conversion logic here
}

I hope this helps. Cheers

3

Hello covenantcodes,

I understand the 1st step, but I am just confused on the 2nd step. For the 2nd step, I don’t understand what you trying to say. Aren’t they the same thing or is there something different about it.

Nvm I found out, !0 is true which is basically a 1 and that how my code was still working.

1 Like
4

@covenantcodes It is great that you solved the challenge, but instead of posting your working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge. How to Help Someone with Their Code Using the Socratic Method

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

5

@ILM
My sincere apologies, I will go the attached guide. Thank you for your feedback