Learn Hiragana and Katakana charaters with some help from plain old JavaScript.
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.
HTML & CSS
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.
JavaScript
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.
Repository here: https://github.com/zprima/jpnmnemonics
