Arabic to Roman Converter - Mihail Gaberov.gif

Have you heard about the romans? Who hasn’t, right 🙂

Apparently they used their own numeric system, which, one can say, was a bit too mouthful, especially when it comes to writing. It looks like this: I, II, III, IV, V, VI and so on.

Maybe that’s one of the reasons for the mankind to adopt and use the Arabic numeric system till today. The one we all know and use from early stages in school. Yes, yes, the same 1,2,3… we all start with.

What Are We Building?

In this tutorial, we will see how to build a small app that gives the user an input for entering Arabic numbers and displays their Roman equivalent with a nice, sleek animation.

We will use SolidJS for building the UI and the good, old JavaScript for implementing the algorithm for the actual conversion. More on this later in the article.

We also will take advantage of CSS Modules and SASS when it comes to making our application a bit more eye pleasing.

TL;DR

💡If you want to skip the reading, here 💁 is the GitHub repository, and here you can see the live demo 📺**.**

What is SolidJS?

SolidJS logo

SolidJS logo

SolidJS is a front-end library for creating reactive user interfaces. It is still relatively new. It looks a lot like React, but they say it’s simpler and faster. It got my attention recently, so I’ve decided to take a deeper look and educate myself. And, of course, share my experience with you here.

The Project

Our application is really simple. It has just a few dependencies and contains only several components. Let me walk you briefly through them.

Dependencies

{
	"devDependencies": {
    "vite": "^4.1.1",
    "vite-plugin-solid": "^2.5.0"
  },
  "dependencies": {
    "@motionone/solid": "^10.15.5",
    "@solid-primitives/keyed": "^1.1.8",
    "sass": "^1.58.3",
    "solid-js": "^1.6.10"
  }
}

Except the obvious dependency - solid-js , I’ve only installed sass, @motionone/solid and @solid-primitives/keyed libraries. We will use these for the styling and the animations. Vite related packages come with the SolidJS app installation, which means that when you run:

npx degit solidjs/templates/js my-app