Learn Kana with simple JavaScript

Learn Hiragana and Katakana charaters with some help from plain old JavaScript.

Photo by Jelleke Vanooteghem on Unsplash

We are making a single html page that will display a random Kana — a random Hiragana and its Katakana equivalent.

Data structure

Lets create app.js, it will contain our JavaScrip, data structure and the function to fetch a random kana out of the array.

Our kana variable is an array of objects. Where each object represents a hiragana/katakana pair together with its romaji — english letter.

The “hiragana_info” and the “katakana_info” serve as hints, a simple remined what the kana for each of them kinda looks like.

For example: Hiragana for “a” is あ which looks like an apple right? :)
Katakana is ア which looks like an axe.

The Kana for が (ga) is the same as か (ka) with added dakuten. Here the “original_kana_eng” is linking the ga to ka for any tips for remembering the kana.


The html is straightforward. We need to display the english charater somewhere so we dont forget what the hiragana and katakana kana actually mean.

Hints are gonna be display in upper right corner, they will be small.

The center of the page will contain both kanas.

With a little CSS magic, the page looks like this.


All we need now is to fetch the next random kana when we click the Next button and update the page.

And that is all there is.


Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store