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

JavaScript
1

Tell us what’s happening:

i cant see what i am doing wrong. is there anything i am missing?

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>Converter</title>
</head>
<body>
  <input id="number"/>
<button id="convert-btn">Convert</button>
<p id="output"></p>
<script src="script.js"></script>
</body>
</html>

/* file: styles.css */


/* file: script.js */
document.getElementById("convert-btn").addEventListener("click", () =>{
  const input = document.getElementById("number").value;
const display = document.getElementById("output")
const number =+ input;
  if(!input){
   display.innerHTML = "Please enter a valid number"
   return;
  } 
  else if(number < 0){
    display.innerHTML = "Please enter a number greater than or equal to 1"
  }
 else if (number > 3999){
display.innerHTML = "Please enter a number less than or equal to 3999"
  }
  else {
  const result = convertNumToRoman(+input.value)
  display.innerHTML = result;
  }
})


function convertNumToRoman(num){
const val = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1];
const syms = ["M", "CM", "D", "CD", "C", "XC", "L", "XL", "X", "IX", "V", "IV", "I"];
let roman = "";
let i = 0;
while(num > 0){
  const div = Math.floor(num / val[i]);
  num -= div * val[i]
  roman += syms[i].repeat(div)
   i++
}

return roman;
}

Your browser information:

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

Challenge Information:

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

2

what issue are you having? what debugging have you tried to do?

3

i can’t get it passed step 7 of the test. it is suppose to check for specific number and converts it to roman number. problem: When the #number element contains the number 9 and the #convert-btn element is clicked, the #output element should contain the text "IX"

my function:

function convertNumToRoman(num){
const val = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1];
const syms = ["M", "CM", "D", "CD", "C", "XC", "L", "XL", "X", "IX", "V", "IV", "I"];
let roman = "";
let i = 0;
while(num > 0){
  const div = Math.floor(num / val[i]);
  num -= div * val[i]
  roman += syms[i].repeat(div)
   i++
}

return roman;
}```
4

have you tried using your app? does it do this thing if you test it manually?

5

yes and the app does nothing. if i should console.log it still does not work

6

You need to find out where your app breaks down.

Use console.log() to log variables at different points in your code to find out where the problem is.

const input = document.getElementById("number").value;
  console.log(input)

This does log the input correctly so, we know that works. Go to the next line in the code and log a variable to see how it’s behaving.

7

so i got it figured out now. few things i was doing wrong. iwas not stopping the execution of the code after my if statements with return; also i was not calling my function properly by not passing it the right argument convertNumToRoman(number)- since i already set my input to = number. i hope this makes sense :slight_smile:

1 Like
8

Glad you got it. The only thing I needed to change to pass all the tests was the argument here:

convertNumToRoman(+input.value)
1 Like
9

thank you for your help :saluting_face: