Create a Roman Numerals Converter in Javascript
Hey guys, today we will be building a roman numerals converter app in Javascript, you can check out the app in action here.
The app will convert Roman numerals into Arabic numerals and on the other hand Arabic numerals into Roman numerals. For simplicity purposes, the app will convert numbers between 1 and 3999.
For this tutorial, we are going to have three files index.html, style.css, and app.js. Let us dive right into coding.
1. The HTML file
That is a very simple HTML code. There we have the main div that contains all the elements. An h1 element, and the two input elements, the first one with the id of arabicInput and the second with the id of romanInput
At the end we have a call to a Javascript file, that will be created later. And that is it for the HTML.
2. The CSS file
That is it for the CSS file, I think it is self-explanatory and you are welcome to come up with your own styling, and paste in the link of your app in the response section, so that we all can see your amazing styling. If you do not come up with your styling, it is fine you can still use the one provided.
If you used the styling provided your app should look like the picture above.
3. The Javascript file
Now we have come to the core of our application. For the Javascript file, we will start by looking first at the methods that do the conversion and then we will add event listeners so that we can get the user input.
3.1. Converting from Arabic numeral into Roman numerals
The arabicToRoman method is responsible for converting numbers into Roman numerals.
This method takes an integer number as an argument, then it checks if the number is less than one or greater than 3999, if it is it returns the message “enter a number between 1 and 3999”.
So if the number passes the test then the conversion happens. We use a for loop that runs through the romanNumList object and the number is divided by the object key values then we round down the result. If the result is greater than zero, which is assigned to the variable a, another for loop that appends the object key into the variable roman is run.
3.2. Converting from Roman numerals to numbers
The romanToArabic method is responsible for converting Roman numerals into numbers.
The method takes a string the roman numeral as an argument. First, it converts the string to uppercase. Next, we have two arrays one contains roman numerals and the other contains their correspondent in the Arabic numeral system. Then we have two variables index and num, both assigned zero. Right after we have a loop that runs through the romanNumList array, then we look for the index of the roman numerals in the romanNumber, if the script finds it then the num variable is incremented with the corresponded Arabic number, and the roman numeral is replaced by a hyphen “-”, then we get the index of the next roman numeral, and we repeat this process until all the Roman numerals are substituted by hyphen. In the end, the function returns the num variable.
3.3. Adding the event listeners
The final version of the app.js file looks like that, in this file we have the two methods for conversion and the event listeners.
First, we get the arabicInput and the romanInput, and for both of them, we are listening for the input action. For arabicInput every time, a number is entered the arabicToRoman method is called and puts its value into the romanInput.value. On the other hand for the romanInput, every time a roman numeral is entered it calls the romanToArabic method and puts its value into the arabicInput.value.
4. Conclusion
So that is it for the converter, now the app is completely functional converting Roman numerals to Arabic numerals and vice versa. You can download the full code here or see it in action here.
Good day, good coding.
📝 Read this story later in Journal.
🗞 Wake up every Sunday morning to the week’s most noteworthy Tech stories, opinions, and news waiting in your inbox: Get the noteworthy newsletter >
