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.
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.
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.
Our application is really simple. It has just a few dependencies and contains only several components. Let me walk you briefly through them.
{
"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