Roman number converter

September 21, 2020

While finishing up the JavaScript lessons in Free Code Camp we had to build a Roman numeral converter to take a number from 1 to 3999* and convert it to the Roman numerals. Spending some time with it I thought this would be a good program to create a web app. I created a pen on my codepen page, link to pen, go and play with it:

User Interface:

I created a basic user interface, using HTML and CSS. It has a single input field, limited to 4 characters and a convert button, to activate the code. The Roman numerals will show at the bottom when converted.

The Code:

My solution to this issue was to take the number and first convert it to 4 digits so if the number for 3 it would convert it to ‘0003’. From there I converted it to a string that way I can process it like an array.

It will look kind of like this:
[0, 0, 0, 3]
[thousand, hundred, ten, one]

Each area will then be sent to a separate function to process to process it with Roman numeral’s special rules in conversion based on its place in that string. For example, a one in the ones spot ‘I’ is not the same as a one in the tens spot ‘C’. From there the parts will be reassembled into its own string and passed into the HTML to be displayed below the ‘convert’ button.

For example number = ‘197’
Since there is a zero in the first spot number[0] this will go into the functions and return empty string ‘’.
Number[1] is a one and going through the hundreds convert function and uses that logic to know  this one is a 100 and returns a ‘C’ for this function.
Number[2] which is a nine will get passed in and since it’s in the tens location it will convert to ‘XC’ in the function.
Number[3] the five gets passed into the convert ones function since this is more than five it will add the ‘V’ then miss 5 from the number and times what is left with a the ones symble ‘I’ to ultimately return ‘VII’ from the function.

In the end all the functions will be merged together and sent to the HTML file to show the converted number to the Roman numeral version, ‘CXCVII’.

As for error handling, there’s not much to the app but to help keep it from crashing or giving weird answers. The input field is already set to only accept up to four characters but that doesn’t stop somebody from putting in 9999 or ABCD. To cover for that the program checks if the number is over 3999 or is not a number if either of these happen it will display an error message; go ahead and give it a try, it won’t explode.

*Numbers over 3,999 have a different formatting where the when it hits 4,000 the four IV will have a line above it.

Related Articles

Received AWS Certified Cloud Practitioner Certificate

Received AWS Certified Cloud Practitioner Certificate

This past weekend I tested and received my AWS Certified Cloud Practitioner certification. When I started training for the test I had very little exposure to AWS. I studied for a little over a month, around 60 hours, before taking the test; which luckily I passed on...

read more
Inventory HTML page to a CSV file

Inventory HTML page to a CSV file

As a New Year’s resolution, not mine, they wanted to make sure their online store, reseller site, inventory was up to date. They wanted to make sure their inventory was cleaned up and make sure that what’s listed on the site matches their own inventory. They had been...

read more
Tic-Tac-Toe in JavaScript

Tic-Tac-Toe in JavaScript

To take a break from the other projects this weekend I worked on a Tic-Tac-Toe game in JavaScript. The basic instructions I had for myself was it needed to be able to be played by 1 or 2 people. I started with creating the game for 2 players. Thinking that if I can...

read more

Pin It on Pinterest

Share This