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

JavaScript
1

Tell us what’s happening:

Hi! I’m going crazy here haha. I’ve been watching videos on how to create algorithms but I think they were too advanced. I looked everywhere in the forum and I asked ChatGPT to guide in how to solve this. All of that was unsuccessful cause when I think I have something, I try to run the code and it says it’s wrong. Can someone please orient me? I successfully made it to far in the course and I have an attention problem, maybe that’s could be a problem for solving this things. :smiling_face_with_tear: :pray:t4: :pray:t4:

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Roman Number Converter</title>
    <link rel="stylesheet" href="styles.css" />
    </head>
  <body>
    <h1>
      Roman Number Converter
    </h1>
    <label>Enter number to convert here:</label>
    <input id="number"/>
    <button id="convert-btn">
      Convert
    </button>
    <span id="output"
for="number"/>
     <script src="script.js"></script>
  </body>
</html>







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


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

const checkUserInput = () => {
  const number = parseInt(numberInput.value);
  
  if (isNaN(number)) {
    result.textContent = "Please enter a valid number";
  } else if (number < 1) {
    result.textContent = "Please enter a number greater than or equal to 1";
  } else if (number >= 4000) {
    result.textContent = "Please enter a number less than or equal to 3999";
  } else {
    result.textContent = arabicToRoman(number); 
  }
  return number.value;
};

const arabicToRoman = (checkUserInput) => {
  const values = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1];
  const romans = ['M', 'CM', 'D', 'CD', 'C', 'XC', 'L', 'XL', 'X', 'IX', 'V', 'IV', 'I'];

  let result = '';

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

  return result;
};

/* file: styles.css */
:root {
  --light-grey: #f5f6f7;
  --dark-blue: #1b1b32;
  --orange: #f1be32;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
    monospace;
  font-size: 1.125rem;
  color: var(--light-grey);
  background-color: var(--dark-blue);
  padding: 0 4px;
}

h1 {
  font-size: 2.125rem;
  text-align: center;
  margin: 15px 0;
}

input {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 70%;
  padding: 6px;
  margin: 10px;
}

label {
  white-space: nowrap;
  word-spacing: -6px;
  margin: 3px;
}
#convert-btn {
  font-size: inherit;
  font-family: inherit;
  background-color: var(--orange);
  width: 60%;
  height: 2rem;
  padding: 3px;
  border: 2px outset orange;
  border-radius: 3px;
  cursor: pointer;
}

span {
  margin-inline: auto;
  width: clamp(320px, 50vw, 460px);
}

#output {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  text-align: center;
  min-height: 70px;
  margin-block-start: 30px;
  padding: 10px;
  border: 5px double var(--orange);
  border-radius: 1px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 Safari/605.1.15

Challenge Information:

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

2

Hi.

I suggest you work on 1 story at a time and try and pass each one before going on to the next.

This is a fairly straightforward one to start with, your code had this error:

When you click on the #convert-btn element without entering a value into the #number element, the #output element should contain the text "Please enter a valid number".

You have used isNaN() function. That requires a number to be entered but the story says the warning message should come up when no value is entered. That is a different thing. Have a look back at the Palindrome checker as there was something similar there you can tweak. It is looking for the output element to be populated with text if the condition is true.

If you need more help just come back on here. You can use the same thread while you’re working on the same project.

1 Like
3

in you arabicToRoman function. You’re not using the checkUserInput parameter.

In your for loop, you’re using num which I presume should represent the value that’s been passed to the function, so you could change checkUserInput to num.

This is a boss challenge. And it might take you maybe days to finish. It did for me. But that’s ok. Just do something every day. If you feel irritated, take a break. Get some fresh air, phone a friend, watch something on tv, grab a bite to eat.

Then later have another look. I know you want to finish it asap but this is part of curriculum. Sort of. That you’re faced with a problem and you’re on your own. You can’t look it up, you’re the chief, and you have to find a solution. Take it slow and steady, break it down, try something, see if it works. Start with converting 1 into I. Then 2 into II. And so on.

You can do this!

1 Like
4

Thank you so much! I’m actually gonna start over following your advice and also redo the building a decimal to binary part to see if maybe there’s a logical clue in there. I’m also gonna write down everything in paper because I feel like that could help me better to create the algorithm for this. Thank you again for the kind words, hopefully I can solve this since I’m looking for a job and this would look fenomenal in my resume. Have a great day!

2 Likes
5

Note - you should not let GPT write any of the code for you for certification projects

6

She’s not. Mere asking it to guide doesn’t mean letting it write the code. She’s smart she understand that she can’t let it write the code.

7

That is not clear from what has been said so far by OP. Since this is an academic integrity issue, I want to be clear. You should not use AI to write any of the code for you on the certification projects.

1 Like