Posted in freecodecamp, web dev

Roman Numeral Converter

I was able to get 1-19 working. I stopped to think about the best way to go about 20+ with keeping the code as short as possible… instead of doing a function for every 10 numbers (20-29, 30-39 etc). I was trying to accomplish this with for loops but haven’t gotten very far just yet.

I took a bit of a break to work on more tutorials and think about this one some more, but I’m still kind of stuck so I guess the best way to figure it out will be to work on it instead of just think about it.

I was going to try using an object and keys instead of a bunch of if/else statements, but I’m not quite sure how that would work. I started off by making an object of Roman Numerals based on a chart (this one specifically).

Roman Numerals Chart showing the Roman Numeral equivalent of numbers 1 - 1001

As a refresher, a new object is created by assigning a pair of curly brackets to a variable. Inside those brackets are key/value pairs written in the format key: “value” and separated by a comma. There can be more to it but this will do for my purposes.

To access the properties, dot notation is used, similar to using methods and such. There is also bracket notation, but it seems to me that dot notation is used more. However, if a property name is not a valid JS identifier (like one that has a space or hyphen), bracket notation would have to be used.

So with dot notation it would look like myObject.key = “value”.
With bracket notation it would look like myObject[“key”] = “value”

The more I think about it I’m kind of wondering if using objects will really make things more compact. I’m still going to need to do if statements to check the user input. Maybe just going with what I was doing is better for now, because at least I can finish the project even if it isn’t the most compact/efficient code. I’ll also get plenty of practice with functions and if statements.

What I had started doing was checking if the input was less than or equal to certain digits and then modifying the inner text with the correct roman numerals. This is going to cause a lot of repeated code patterns unfortunately.

Another thing I just realized/remembered was that some of the if statements needed to have parseInt() in them, whereas others didn’t. This is because of JavaScript’s type coercion and the different comparison operators.

Since === is a strict equality operator, no coercion is done and the user input need to be converted to a number type so that the values can be compared.

The comparison operators <= and >= are not strict so JS can try to force the type to match.

I was trying to create a parsed version of the variable so I could just put that in the conditions, but for some reason that didn’t seem to work even though I think it should. It’s another one of those things where it would be nice to have someone to talk to about how it works/doesn’t work but alas, I don’t have anyone.

Ok I had another idea. Maybe I can make a variable to use for the first digit, then I can just else if the ones place. Perhaps something like numberValue.value[0]? That didn’t work though so maybe I’ll revisit the idea later.

I went ahead and did the 20s. I really don’t like that I’m repeating so much but I also am at a loss for how to do it better.

Author:

Web Developer with art and design experience - recently laid off and using my free time to learn more.