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

Curriculum Help
1

Tell us what’s happening:

I am trying to make this roman to numeral converter but im facing a problem. The main cause of this seems to be my values object which isnt allowing the program to continue executing. please do help

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Roman Numeral Converter</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    
    <div id="container">
      <h1 id="title">Roman Numeral Converter</h1>
      <input id="number" type="number" required>
      <button id="convert-btn">Convert</button>
    </div>
    <div id="output">
    </div>
    <script src="script.js"></script>
  </body>
  </html>

/* file: styles.css */
body{
  display:grid;
  background:black;
  height: 100vh;
  overflow: hidden;
  justify-content: center;
  align-items: center;
}
#container{
  display: grid;
  border: 5px solid white;
  color: white;
  width: 500px;
  height: 300px;
  justify-content:center;
  align-items: center;
}
input {
  outline: none;
  font-size: 2rem;
  text-align: center;
  margin-bottom: -20px;
  margin-left: auto;
  margin-right: auto;
}
button {
  height: 35px;
  width: 140px;
  margin-left: auto;
  margin-right: auto;
  font-family: Arial, sans-serif;
  font-size: 1.3rem;
}
#title {
  margin-bottom: -18px;
  margin-right: auto;
  margin-left:auto;
}
#output {
  display: grid;
  border: 5px solid white;
  color: white;
  max-width: 500px;
  justify-content:center;
  align-items: center;
  height: 100px;
  font-family: Arial, sans-serif;
  font-size: 1.5rem;
  text-align:center;
}

/* file: script.js */
const input =document.getElementById("number")
const button= document.getElementById("convert-btn")
const output= document.getElementById("output")
function convert(){
  if (input.value === ''){
    output.textContent = "Please enter a valid number"
  } else if (input.value <= 0){
    output.textContent = "Please enter a number greater than or equal to 1"
  } else if (input.value >= 4000){
    output.textContent = "Please enter a number less than or equal to 3999"
  }
  const values = {
  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 roman = '';
  for(const key in values){
    const numberValue = values[key];
    while(numberValue <= number){
      number -= numberValue;
      roman += key
    }
  }
  output.textContent = roman;
}
button.addEventListener("click", convert)

Your browser information:

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

Challenge Information:

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

2

Please give us more information about this problem. What are the symptoms?
What did you do to investigate it? What research have you done?

3

My apologies for the hassle, I ended up solving the issue, turns out the keys in my values object mustve been in String format to increment the string roman variable. My program wasn’t executing because it would produce ‘undefined’ output when I logged the console. Nonetheless, Thank you for taking time to reply to my questions all the time and I end up figuring out my dumb mistakes wasting your time. Cheers!