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

JavaScript
21

Here’s my code for the for loop:

  for (let value in romanNumerals) {
    while (number.value >= value) {
      result += romanNumerals[value];
      number.value -= value;
    }
  }

I removed the duplicated statement, but there’s still no change going on. I’d like to see where I’m going wrong in this code.

22

Never mind. I’ve gotten further, but I’m encountering a bug.

23

Never mind, I just fixed it.

24

this is the perfect way to make an app that works for the tests, but doesn’t work in general. If I want to cehck what 762 is in roman numerals, are you going to add it to this object in the next version of the app, or better have an app that can calculate it?

25

I changed my code. Here it is as follows:

const number = document.getElementById("number");

const convertBtn = document.getElementById("convert-btn");

const output = document.getElementById("output");

const convertToRomanNumeral = () => {
  if (number.value === "") {
    output.innerHTML = "Please enter a valid number";
    return String(output);
  }

  if (number.value < 1) {
    output.innerHTML = "Please enter a number greater than or equal to 1";
    return String(output);
  }

  if (number.value > 3999) {
    output.innerHTML = "Please enter a number less than or equal to 3999";
    return String(output);
  }
  const romanNumerals = {
    1000: "M",
    900: "CM",
    800: "DCCC",
    700: "DCC",
    600: "DC",
    500: "D",
    400: "CD",
    100: "C",
    90: "XC",
    80: "LXXX",
    70: "LXX",
    60: "LX",
    50: "L", 
    40: "XL",
    10: "X",
    9: "IX",
    8: "VIII",
    7: "VII",
    6: "VI",
    5: "V",
    4: "IV",
    1: "I" 
  }

  let numberOfThousands = Math.floor(number.value/1000);
  let remainder = number.value % 1000;
  let numberOfHundreds = Math.floor(remainder/100);
  let remainder1 = remainder % 100;
  let numberOfTens = Math.floor(remainder1/10);
  let numberOfOnes = remainder1 % 10;
  
  /*console.log("Number of Thousands = " + numberOfThousands);
  console.log("Remainder = " + remainder);
  console.log("Number of Hundreds = " + numberOfHundreds);
  console.log("Remainder = " + remainder);
  console.log("Number of Tens = " + numberOfTens);
  console.log("Remainder = " + remainder);
  console.log("Number of Ones = " + numberOfOnes);
  console.log("Remainder = " + remainder);*/
  
  let result = "";
  // Find the Roman numeral for 1000
  if (numberOfThousands > 0 && numberOfThousands < 4) {
    let temp = romanNumerals[1000];
    for (var i = 0; i < numberOfThousands; i++) {
      output.innerHTML += temp;
    }
  }

  if (numberOfHundreds > 0) {
    if (numberOfHundreds < 4) {
      let temp1 = romanNumerals[100];
      for (var i = 0; i < numberOfHundreds; i++) {
        output.innerHTML += temp1;
      }
    } else {
        output.innerHTML += romanNumerals[numberOfHundreds * 100];
    }
  }

  if (numberOfTens > 0) {
    if (numberOfTens < 4) {
      let temp2 = romanNumerals[10];
      for (var i = 0; i < numberOfTens; i++) {
        output.innerHTML += temp2;
      }
    } else {
        output.innerHTML += romanNumerals[numberOfTens * 10];
    }
  }

  if (numberOfOnes > 0) {
    if (numberOfOnes < 4) {
      let temp3 = romanNumerals[1];
      for (var i = 0; i < numberOfOnes; i++) {
        output.innerHTML += temp3;
      }
    } else {
        output.innerHTML += romanNumerals[numberOfOnes];
    }
  }

  console.log(output);
  /* (let value in romanNumerals) {
    while (number.value >= value) {
      result += romanNumerals[value];
      number.value -= value;
    }
  }*/
}

convertBtn.addEventListener("click", () => {
  convertToRomanNumeral(Number(number.value));
});

Thank you for your help and your response.

26

In this code, the bug I’m getting is that when printing a Roman numeral, I always get one consecutively after the other, when it should be like you display one, then you display another; more like replacement, rather than consecutively next to each other.

27

Never mind. I got it fixed.