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

Tell us what’s happening:

I don’t really understand how to convert Arabic numerals into Roman. I did what I could but it’s not convertion. Can somebody explain to me how to do it? I’m lost :sob: :sob: :sob::sob:

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
<meta charset="UTF-8" />
    <meta name="viewport" content="width=500, initial-scale=1.0" />
<link  href="styles.css" rel="stylesheet" />
<title id="title">Roman Numeral Converter</title>
</head>
<body>
  <h1 id="h1">Roman Numeral Converter</h1>
<input id="number" type="number">
</input>
<button id="convert-btn">Convert</button>
<div id="output"></div>


<script src="script.js"></script>
</body>
  </html>
/* file: styles.css */
*, ::before, ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  align-items: center;
}
#convert-btn {
  background: linear-gradient(#711DB0, #C21292, #EF4040, #FFA732)
}
body {
background: linear-gradient(#e66465, #9198e5);
}
#h1 {
  border-top: solid thick #9A1663;
  border-bottom: solid thick #E0144C;
  border-left: solid thick #FF5858;
  border-right: solid thick #FF97C1;
  margin-bottom: 10px;
 
}
div {
  margin-top: 10px;
  background: white;
  display: block;
  border-top: solid black;
  border-bottom: solid black;
  border-left: solid black;
  border-right: solid black;
  padding: 10px 50px 30px 0;
}
/* file: script.js */
const numberInput = document.getElementById("number");
const convert = document.getElementById("convert-btn");
const output = document.getElementById("output");
convert.addEventListener("click", () => {
  if (numberInput.value === "") {
    output.innerText = "Please enter a valid number"
  } else if (numberInput.value < 1) {
    output.innerText = "Please enter a number greater than or equal to 1"
  } else if (numberInput.value > 3999) {
    output.innerText = "Please enter a number less than or equal to 3999"
  } else if (numberInput.value === "9") {
   output.innerText = "IX"
 }
 else if (numberInput.value === "16") {
   output.innerText = "XVI"
 }
 else if (numberInput.value === "649") {
output.innerText = "DCXLIX"
 }
 else if (numberInput.value === "1023") {
output.innerText = "MXXIII"
 }
 else if (numberInput.value === "3999") {
output.innerText = "MMMCMXCIX"
 } else {
   return;
 }
}) 

 

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

Yeah, hardcoding the answers is definitely not a valid solution.

Did you look up how to write Roman numerals? This article seems good to me

I did. Just a few min ago actually. And I kinda knew thing or two from school. But how to make a programme do this is something I don’t know

I think I need a loop of some kind. But how to make it convert?..

Well, can you write out the steps you would follow by hand to do this?

I can only think of creating a set of objects with roman numerals

What does that mean? How would you do this step by step? You are going to need a list of small steps to tell the computer.

I would create a function within that function I’d create a const with a set of objects with name of a roman numeral and what it looks like in arabic numbers. I guess

That’s not a list of steps of how to do this by hand.

Slow down.

If you had a sheet of paper and a pencil, how would you convert a number into a roman numeral?

1 = I, 2 = I+I and etc

That’s not a list of steps; that’s a couple of examples of converting numbers. You absolutely have to say smaller steps or the computer cannot understand you.

If you were to convert 26, how would you, one tiny, itty bitty step at at time, convert 26 to XXVI?

I’m so sorry but I don’t really understand how I can do it in smaller steps :frowning:

Unfortunately, if you cannot in any way describe how you convert 26 into XXVI, then you can’t tell a computer how to do it.

It doesn’t have to be perfect, but you really have to try to describe in some way how to do this as the first step to writing code that does this conversion.

Number = 26,
I = 1,
X = 10,
VI = 6,
26 = XXVI

Cool, that’s a start. So lets add some words talking about why you did those parts!

Why is knowing 1 and 10 important ? (it is!)

Because 1 is the first numeral. You can’t use roman numerals if you don’t know what 1 looks like. 10 is important because without 10 you can’t write 20 as 20 is 10 + 10

Ehh, I don’t need to know 1 for writing 25 though. That’s XXV

Ah, now we’re getting somewhere! So why did you combine XX and VI? (I know why, and you know why, but the computer doesn’t know why and we need to tell the computer in a way it understands)

Because it would create 26. XX + VI = XXVI

Cool, so it looks like part of your process is figuring out how to represent the “1s digit”. Can you write a small function that converts the 1s digit only?

Here’s a start

function convertOnesToRoman(num) {

}

This function should return I when you call convertOnesToRoman(1) and VI when you call convertOnesToRoman(6), and so on for all the numbers from 1 to 9.

How you do this internally isn’t super important. It’s important that this function returns the right roman numeral when passed the numbers 1, 2, 3, 4, 5, 6, 7, 8, or 9.

function convertOnesToRoman(num) {
const romanNum = [
{symbol: I, value: 1},
{symbol: IV, value: 4},
{symbol: V, value: 5},
{symbol: IX, value: 9},
]
let result = "";
for ( let i = 0; i > 0; i++)
if (i < 0) {
break
}
romanNum + 1 === result;
}