From Roman to Modern Times

From Roman to Modern Times

Or how to make your machine read Roman numerals with this JavaScript algorithm. We’re so used to our regular numbers — 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 — that we forget we haven’t always had those.

We’re so used to our regular numbers — 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 — that we forget we haven’t always had those. There were quite a few numeral systems in the history of mankind, but most of them are no longer in use. However, Roman numerals are still in (sort of) use, especially if you have a grandfather’s clock and want to know the time. 😁

Most of us have been taught how to read Roman numerals as kids and we do that almost instinctively. Here’s a primer how to read them:

Roman numerals are represented by seven different symbols: IVXLCD and M.

Symbol       Value
I             1
V             5
X             10
L             50
C             100
D             500
M             1000

For example, 2 is written as II in Roman numeral — just two one's added together. 12 is written as XII, which is X + II. 27 is written as XXVII, which is XX + V + II.

Roman numerals are usually written largest to smallest from left to right. However, as numbers increase, at some point, it makes more sense to subtract the lower number from the larger number. For example, 9 is not VIIII but IX,40 is not XXXX but XV, etc. It’s easy to explain that to a fellow human, but how can we explain that to a machine? We need to write a fool-proof algorithm to do that!


First, let’s just translate Roman numerals to regular numbers in the order they appear. For example, XLVII would be 10, 50, 5, 1, 1. To do that we’ll use a for loop, and we’ll be checking if the current numeral in the string (s) is one of the Roman numerals. For example, if it’s I, we’ll be adding 1 to the array of numbers that we created beforehand, and if it’s X, we’ll be adding 10.

javascript front-end-development programming web-development algorithms

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Top 19 Front-End Web Development Tools to Consider in 2020

In this post, we are putting curated list of top tools with key features and download links "Top 19 Front End Web Development Tools to Consider in 2020"

5 JavaScript Projects You Should Build As a Front-End Developer

5 JavaScript Projects You Should Build As a Front-End Developer: Brochure website; A blog template with HTML and CSS; Web application using an API; An eCommerce shopping cart; Personal portfolio

Top 6 Productivity Tools for Front-end Developers

Today I wanted to share with you the tools I daily use to increase my productivity as a front-end developer. 6 tools to increase your productivity as a Front-end developer.

Top 9 Open source JavaScript frameworks for front-end web development

About a decade ago, the JavaScript developer community began to witness fierce battles emerging among JavaScript frameworks. In this article, I will introduce some of the most well-known of these frameworks. And it's important to note that these are all open source JavaScript projects, meaning that you can freely utilize them under an open source license and even contribute to the source code and communities.

Front-End Web Development Best Practices

In this article, I am going to talk about best practices to follow when structuring the project’s frontend architecture, writing front-end code, and preparing for deployment. Front-End Web Development Best Practices