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

JavaScript
1

Tell us what’s happening:

Hello, I believe my function converts numbers to roman correctly because I have tested the user stories myself and they work but I cannot seem to pass the test, can someone help?

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>Roman Numeral Converter</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div>
      <h1>Roman Numeral Converter</h1>
    <p>Enter a number and we will convert it to roman number for you</p>
    <form>
      <input type="number" id="number" placeholder="Enter a number"/>
    <button id="convert-btn">Convert</button>
    <p id="output"></p>
    </div>
    </form>
    <script src="script.js"></script>
  </body>
</html>

/* file: styles.css */
* {
font-family:"Georgia";
margin:0;
padding:0;
box-sizing: border-box;
}
body {
  background-color:#f4a261;
  color: #432818;
  width: 100dvw;
  height: 100dvh;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}
h1, p {
  margin: 8px;
}
input, button{
  padding:8px 18px;
  margin:0;
  border:none;
  outline:none;
}
button {
  cursor:pointer;
  border-radius:0 20px 20px 0;
}
button:hover{
  background-color: #432818;
  color: #f4a261;
}

/* file: script.js */
const btnConvert = document.getElementById("convert-btn");
const output = document.getElementById("output");

btnConvert.addEventListener("click", () => {
  const inputNum = document.getElementById("number").value;

  if (inputNum === "") {
    output.innerText = "Please enter a valid number";
    return;
  }
  else if (parseInt(inputNum) < 1) {
    output.innerText = "Please enter a number greater than or equal to 1";
    return;
  }
  else if (parseInt(inputNum) >= 4000) {
    output.innerText = "Please enter a number less than or equal to 3999";
    return;
  }
  output.innerText = convertToRoman(parseInt(inputNum));
});

function convertToRoman(num) {
  const ref = [
    ["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 result = "";

  for (let i = 0; i < ref.length; i++) {
    while (num >= ref[i][1]) {
      result += ref[i][0];
      num -= ref[i][1];
    }
  }

  return result;
}

Your browser information:

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

Challenge Information:

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

2

Hmm, it seems that adding type="button" to the #convert-btn button makes tests pass without any problems.

It looks like during tests due to lack of type, the form is actually attempted to be submitted. If callback function prevents default event handling (preventDefault), tests also work. This might be the expected behavior for any button that’s inside of the form element, but doesn’t have type set.

3

you are right! thank you very much, stranger!!! have a great day.