Stuck with my Roman Numeral Converter project

Hello! I am doing the Roman Numeral Converter project, and is currently stuck with two responsiveness issues.

  1. After inputting and pressing “Enter” on the keyboard, it is not responsive. Only clicking the convert button works at the moment.

  2. I cannot get the result to show up in the #output div. Only the white borders show up.

Here is my code for your reference:

HTML:

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=content-width, initial-scale=1.0">
    <title>Roman Numeral Converter</title>
    <link href="styles.css" rel="stylesheet">
  </head>
  <body>
    <h1>Roman Numeral Converter</h1>
    <div class="container">
      <label for="number">Type your number:</label>
      <input type="number" id="number">
      <button id="convert-btn">Convert!</button>
    </div>
    <div id="output"></div>
    <script src="script.js"></script>
  </body>
</html>

CSS:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --purple: #4d114d;
  --white: #ffffff;
  --green: #148f45;
}

body {
  background-color: var(--purple);
  color: var(--white);
  font-family: calibri, sans-serif;
  display: flex;
  flex-direction: column;
}

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

.container {
  margin: 20px auto;
  padding: 0 10px;
  border: 2px solid var(--white);
  display: flex;
  flex-direction: column;
  word-break: break-word;
}

label {
  font-size: 1.2rem;
  padding: 5px 0;
  text-align: center;
  font-style: italic;
}

#number {
  height: 30px;
  font-size: 1.2rem;
  text-indent: 2%;
  margin: 10px 0;
}

#convert-btn {
  background-color: var(--green);
  border-radius: 10px;
  cursor: pointer;
  max-width: 150px;
  padding: 5px;
  margin: 5px auto 15px auto;
}

.output-box {
  margin: 20px auto; 
  padding: 0 10px; 
  border: 2px solid var(--white);
}

JavaScript:

const userInput = document.getElementById("number");
const convertBtn = document.getElementById("convert-btn");
const showResult = document.getElementById("output");

const dictionary = {
  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 theBox = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1];

const revisedInput = Number(userInput);

const magicConverter = (revisedInput) => {
  let outcome = "";
  let i = 0;
  while(revisedInput > 0) {
    const reduction = theBox[i];
    if(reduction > revisedInput) {
      i++;
    } else {
      revisedInput -= reduction;
      outcome += dictionary[reduction];
    }
  }
  return showResult.innerHTML = `
    <div class="output-box">
      ${outcome}
    </div>
  `  
}

convertBtn.addEventListener("click", magicConverter);

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

Thanks in advance for your expert advice! :face_holding_back_tears:

convertBtn.addEventListener("keydown", (e) => {
  if(e.key === "Enter") {
    magicConverter();
  }
});
  1. This means when i press Enter on convertBtn element, i will call magicConverter function. But do you want to press Enter on button, or inside the input element?
const magicConverter = (revisedInput) => {
  console.log(revisedInput)
  ... ...
}
  1. When i console.log(revisedInput) and press F12 to check console. i see this

image
Your revisedInput that your previously declared did not pass into this function correctly.

Happy coding~

Hi @WongYC-66 , thanks for giving me some tips! :slightly_smiling_face:

I would like to ask, is it necessary to turn the user’s input (which is initially treated as a string in JavaScript) into a number before applying it to functions for additions, subtractions… etc?

Also, I still cannot make the Roman Numeral result appear in the output container. Any idea why?

If your addition is to sum up two values you need to parse them from string type to number type. Else unexpected result could turn up.

100 + 100 = 200                // number + number
'100' + '100' = '100100'     // string + string. Unless this is the "string addition" you aiming for.

Please share your latest script.js code too.

@WongYC-66 Thanks for your great advice! I have revised my entire code and it works now! :smile:

Just wanna type some of my understandings here for record:

Regarding your first point, it is such a silly mistake looking back. Simply put, the event listener should be relevant to where the cursor is at when the action is executed.

Regarding your second point, I’d like to liken this to an oven. My original code const revisedInput = Number(userInput); is just like me getting myself a brand new oven. Although I know that I can bake bread with it, I did not do anything with it, thus rendering it useless. The action of baking using the oven is the same as creating functions to “use” the revisedInput.