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

JavaScript
1

Tell us what’s happening:

Converter not working on FCC, but it does on VSCode.
I created my converter on freeCodeCamp and when I run the tests there are a few tests that do not pass. However, I have copied and pasted all the files (HTML, CSS and JavaScript) exactly as they are into VSCode, and everything works perfectly fine.
The tests not passing are those when the converted number has to be displayed in the output, but it doesnt seem to work on FCC when I click the button.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <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>
    <main>
      <h1>Roman Numeral Converter</h1>
      <div id="input-container">
        <label for="number">Enter a number to convert it into a Roman number:</label>
        <input id="number" type="number" required />
        <button id="convert-btn">CONVERT</button>
      </div>
      <div id="output"></div>
    </main>
    <script src="script.js"></script>
  </body>
</html>

/* file: styles.css */
:root {
  --main-color: #001f67;
  --second-color: #F5C249;
  --text-color1: #fff;
  --text-color2: #000;
}

* {
  box-sizing: border-box;
}

body {
  background-color: var(--main-color);
  margin: 0;
  padding: 0;
}

main {
  display: flex;
  flex-direction: column;
  font-size: 24px;
  width: 100vw;
  height: 100vh;
}

h1 {
  margin: 100px auto 60px;
  color: var(--text-color1);
  font-size: 1.7em;
  letter-spacing: 2px;
  font-family: Helvetica, sans-serif;
  font-weight: lighter;
}

#input-container {
  display: flex;
  flex-wrap: wrap;
  width: 600px;
  height: 200px;
  margin: 0 auto;
  background-color: var(--second-color);
  justify-content: center;
  align-items: center;
  color: var(--text-color2);
  border-radius: 15px;
  border: 4px solid #463815;
  box-shadow: 4px 3px 5px #463815;
}

label {
  width: 100%;
  text-align: center;
  margin: 30px auto 0;
  font-size: 1.4rem;
}

#number, #convert-btn {
  margin-bottom: 30px;
  height: 35px;
  text-align: center;
}

#number::-webkit-inner-spin-button,
#number::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#number {
  width: 350px;
  margin-right: 30px;
  border-radius: 5px;
  border: 1px solid;
}

#convert-btn {
  width: 100px;
  height: 40px;
  border-radius: 20px;
  border: 2px solid #463815;
  background: #ff7800;
  color: var(--text-color2);
  font-weight: bold;
  font-size: 0.9rem;
  cursor: pointer;
}

#convert-btn:hover {
  background: #FFb000;
}

#output {
  width: 600px;
  height: 100px;
  margin: 40px auto 0;
}

.hidden {
  color: var(--text-color2);
  border-radius: 15px;
  border: 4px solid #463815;
  width: 100%;
  height: 100%;
  background-color: var(--second-color);
  text-align: center;
  font-size: 1.2em;
  padding: 20px 0;
}

/* file: script.js */
const number = document.getElementById('number');
const convertBtn = document.getElementById('convert-btn');
const output = document.getElementById('output');

const romanNumbers = [
  {
    roman: "M",
    numeral: 1000,
  },
  {
    roman: "DM",
    numeral: 900,
  },
  {
    roman: "D",
    numeral: 500,
  },
  {
    roman: "CD",
    numeral: 400,
  },
  {
    roman: "C",
    numeral: 100,
  },
  {
    roman: "XC",
    numeral: 90,
  },
  {
    roman: "L",
    numeral: 50,
  },
  {
    roman: "XL",
    numeral: 40,
  },
  {
    roman: "X",
    numeral: 10,
  },
  {
    roman: "IX",
    numeral: 9,
  },
  {
    roman: "V",
    numeral: 5,
  },
  {
    roman: "IV",
    numeral: 4,
  },
  {
    roman: "I",
    numeral: 1,
  }
]

const convertNumber = (num) => {
  if (num <= 0) {
    return output.innerHTML = `<p class="hidden">Please enter a number greater than or equal to 1</p>`;
  } else if (num > 3999) {
    return output.innerHTML = `<p class="hidden">Please enter a number less than or equal to 3999</p>`;
  } else {
    let romanLetters = "";
    for (i = 0; i < romanNumbers.length; i++) {
      while (num >= romanNumbers[i].numeral) {
        romanLetters += romanNumbers[i].roman;
        num -= romanNumbers[i].numeral;
      }
    }
    return romanLetters
  }
}

convertBtn.addEventListener('click', () => {
  if (number.value === "") {
    return output.innerHTML = `<p class="hidden">Please enter a valid number</p>`;
  }
  const inputValue = parseInt(number.value);
  const numConverted = convertNumber(inputValue);
  output.innerHTML = `<p class="hidden">${numConverted}</p>`
})

Your browser information:

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

Challenge Information:

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

2

Hi!
Try removing the html from your output. These tests tend to work best as simplest as possible.

3

You are on the right track, just two simple mistakes.

Here, 900 is CM in roman numeral not DM.

But the second mistake I think you would know it if you took a look at the error message in the console as it says: ReferenceError: assignment to undeclared variable i

You forgot to declare i in your loop, so you need to use let there.

And well done, your code is now working.

4

Thanks so much! I completely forgot to declare i inside the loop with let. Took me ages to see what was wrong and couldn’t find out, such a simple mistake. Thanks so much, it works now!

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.